Skip to content
Platforms

OpenCart

How to add the Otto chat code to the footer template in OpenCart 3 and 4 with the Theme Editor, check it and fix it when it does not show.

On this page

OpenCart is an open source platform for online stores. It has no field for custom code, so you add the chat code to the footer template in the Theme Editor right in the admin. It takes about 10 minutes.

What you need

  • An Otto account. You find the chat code in the panel under Overview, on the Installation & integrations card, on the OpenCart tile. It is under the More platforms tile, and you can also search for it.
  • OpenCart 3 or 4. The steps differ for version 4.1 and later and for versions 3 and 4.0. You find the version in the admin footer.
  • A user with the design/theme permission, for example in the Administrator group.

Chat code

On the OpenCart tile, click Copy code. You get one line with your company’s public key:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>
The sample shows pk_vas_kluc instead of a key, the tile gives you the code with your own key. The key is not a password, you do not need to hide it. Add the code once, it covers the whole site.

Adding the code

OpenCart 4.1 and later

  1. In the admin, open Design, Theme Editor.
  2. Click the blue + button (Add New).
  3. In Store, choose your store and turn on Status.
  4. In Choose Template, select common/footer. The original footer template loads into the editor.
  5. Paste the chat code just before </body> at the end of the template.
  6. Click Save, the blue button with a floppy disk at the top right.

OpenCart 3 and 4.0

  1. In the admin, open Design, Theme Editor.
  2. In Choose your store, select your store.
  3. In Choose a template, click the common folder and then footer.twig. The template opens in the editor.
  4. Paste the chat code just before </body> at the end of the template.
  5. Click Save.
The saved edit replaces the whole footer template. Changes that extensions make to the footer by modifying files no longer apply.
In OpenCart 3 the edit only applies to the theme that was active. After switching to another theme you have to make it again.

Email for support

Is support, an agency or a developer adding the code for you? Send them this email and paste the chat code from the tile below it.

Hello,

please add the attached Otto chat code to the footer template of our OpenCart store (common/footer.twig) just before </body>, so it is on every page. Please keep the footer changes made by our extensions. Add it to the live store, the chat links itself to the domain where it first appears.

Thank you.

Checking it works

  1. Open your website in a new browser window and reload. A chat bubble should pop up in the bottom right.
  2. Send the chat a test question. Otto answers within a few seconds.
  3. In the panel, under Settings, Connections, the Your website row shows the domain the chat runs on.

Product catalogue

OpenCart 3 has a built-in Google feed: in Extensions, Extensions, choose the Feeds type and install Google Base. In its settings, map your store categories to Google categories (only products from them go into the feed), turn on Status and copy the address from Data Feed Url. For OpenCart 4 and for Heureka, the feed is made by an extension from the OpenCart Marketplace.

Paste the feed address in the panel under Settings, Catalogue, and click Check feed. The panel tells you how many products it found, and Otto keeps the feed up to date on its own. More in Product catalogue.

Troubleshooting

I do not see the + (Add New) button

You have OpenCart 3 or 4.0, where you pick the template directly in the Theme Editor. Follow the steps for OpenCart 3 and 4.0.

Something disappeared from the footer after saving

The edit replaced the whole footer template, including changes from extensions. Delete the edit and ask your developer to add the code another way.

Saving says I do not have permission

In System, Users, User Groups, give your group the design/theme permission.

I have more than one store

The edit applies only to the store you selected. Make it again for each other store.

Also check

  • Reload the page without cache with Ctrl+F5, or open it in a private window.
  • The code should be on the page only once, a second copy is ignored.
  • A cookie consent bar can block scripts until the visitor agrees. If the chat only shows up after consent, see Cookie consent.
  • If your site sends a Content-Security-Policy header, allow https://ottoai.sk in it, as shown in Content-Security-Policy.
  • In the browser console (F12), look for messages starting with [Otto]. They tell you what the chat is missing.
  • Still nothing? Write to us at podpora@ottoai.sk and include your website address.

Removing the chat

In Design, Theme Editor, open the footer template edit, delete the chat line and click Save. In OpenCart 4.1 you can also turn the edit off with Status, in OpenCart 3 and 4.0 delete it in Theme History.