Shoper
Install the Yaplet chat widget on a Shoper web shop: through Shoper's own integrations on older (RWD) templates, or as your own module on Storefront templates.
Overview
Shoper lets you add your own code to every page of a shop. Where it goes depends on the template:
- Older (RWD) templates — the Własne integracje (Own integrations) fields. The code needs
<script>tags around it. - Storefront templates — your own integration module with a JavaScript field. This needs the Shoper Premium plan. The code goes in with no tags.
If you're not sure which kind of template the shop uses, ask Shoper support.
Installation Steps
Copy your Yaplet code
In your Yaplet dashboard, go to Brand → Chat widget and open the Install tab. If the tab asks where your website runs, choose Other website. For a Storefront template, also switch off Include the <script> and </script> lines. Copy the code with the copy button on the code block.
The code you copied starts either with a <script> line or, if the tab didn't ask or you switched the lines off, with !function (Yaplet. Whether it needs the <script> lines depends on where you paste it.
Older (RWD) template: paste it into Własne integracje
In your Shoper admin, go to Aplikacje i integracje → Własne integracje (Apps and integrations → Own integrations). In the previous version of the panel, this is Dodatki i integracje → Integracje własne.
In the Stopka strony, przed zamknięciem </body> field (Page footer, before the closing </body>), paste the code on a new line. Shoper requires code in this field to be wrapped in HTML tags, so it must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. The Nagłówek strony - <head> field (Page header) works too. Keep any code already in the field and add the Yaplet code after it.
Click ZAPISZ (Save).
Storefront template: add it as your own module
This needs Shoper Premium. Without it, use Google Tag Manager instead: Shoper's template editor has a built-in Google Tag Manager module.
Go to Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego (Look and content → Shop look → Edit graphic template) and click Edytuj układ i styl szablonu (Edit template layout and style). In the editor menu, click Dodaj (Add), then + Dodaj moduł własny (Add your own module).
Name the module (for example Yaplet chat), choose a category, set the type to Moduł integracji (Integration module) and let it work on any page (dowolna strona). Paste the Yaplet code into the JS (JavaScript) field. It must start with !function (Yaplet; if what you copied starts with a <script> line, leave out that first line and the last </script> line. The other code fields are for developers; if Shoper asks for them, ask your developer or Shoper support. Click ZAPISZ (Save).
In the editor's Integracje (Integrations) tab, find the module, make sure Aktywność modułu (Module active) is ticked, and save.
Check your shop
Open your shop in a new browser tab and reload it. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.
Troubleshooting
- The code shows up as text on the shop's pages — the
<script>tags are missing in the Własne integracje field. Add them as described above and save. - Nothing appears and you added
<script>tags in the module's JS field — remove them. That field takes plain JavaScript. - The module is saved but the chat is missing — check in the editor's Integracje tab that Aktywność modułu is ticked, and save.
- There is no + Dodaj moduł własny option — the shop is not on Shoper Premium. Use Google Tag Manager instead.
- The browser shows an old copy of the page — reload, or open the shop in a private window.