OpenCart
Install the Yaplet chat widget on an OpenCart store by adding the code to the footer template in OpenCart's built-in Theme Editor. No extension and no file uploads.
Overview
OpenCart's Theme Editor lets you change a store's templates from the admin. Adding the Yaplet code to the footer template (common/footer) puts the chat widget on every page. No extension, FTP access or file uploads are needed.
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. Copy the code with the copy button on the code block.
The footer template is HTML, so the code must sit between a <script> line and a </script> line. With Other website chosen, the code already has these lines. If the tab didn't ask, the code is plain JavaScript that starts with !function (Yaplet, and you add the lines when you paste it.
Open the footer template
In your OpenCart admin, go to Design → Theme Editor. If common/footer is already in the list, edit that entry instead of adding a new one.
Otherwise click the Add New button (the plus sign), choose the Store (Default or the store where you want the chat), and select common/footer in Choose Template. The editor loads the footer's current code.
Add the Yaplet code
Leave the existing code as it is: what you save here replaces the whole footer template. Start a new line just above the last line, </body></html>, and paste the Yaplet code there. 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.
Switch Status on and click Save (the floppy-disk button at the top).
Check your store
Open your store in a new browser tab and reload it with Ctrl+F5. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.
OpenCart 4.0 and 3.x
Go to Design → Theme Editor and pick the store under Choose your store. Under Choose a template, open the common folder and click footer.twig. Add the code on a new line above </body></html> the same way, then click Save.
Troubleshooting
- The footer override is switched off — a switched-off entry looks greyed out in the Theme Editor list. Edit it, switch Status on, and save.
- A different store was selected — an entry only changes the store selected in it. With several stores, add the code for each one.
- The code shows up as text at the bottom of the pages — the
<script>tags are missing. Edit the footer, put<script>on a new line before the code and</script>on a new line after it, and save. - The store shows a blank page or an error after saving — part of the footer template changed by accident. Edit the entry and switch Status off to bring back the original footer, then try again.
- The store uses a theme from another developer — the theme may use its own footer template, so the change has no effect. Ask the theme's developer where to add a script.
- The browser shows an old copy of the page — reload with Ctrl+F5, or open the store in a private browser window.