Skip to content
Platforms

Magento and Adobe Commerce

How to add the Otto chat code to the footer of a Magento or Adobe Commerce store, flush the cache and what to do when the chat is missing at checkout.

On this page

Magento Open Source and Adobe Commerce are platforms for larger online stores. You add the chat code to the footer in the design configuration of the admin and then flush the cache, it takes about 5 minutes.

What you need

  • An Otto account. You find the chat code in the panel under Overview, on the Installation & integrations card, on the Magento and Adobe Commerce tile. It is under the More platforms tile, and you can also search for it.
  • Magento Open Source or Adobe Commerce on your own server or on Adobe Commerce on cloud infrastructure (PaaS), with a classic storefront theme.
  • An admin account with access to Content, Design, Configuration and to Cache Management.

Chat code

On the Magento and Adobe Commerce 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

  1. In the admin, open Content, Design, Configuration.
  2. In the row of your store view, click Edit in the Action column.
  3. Under Other Settings, expand Footer.
  4. Paste the chat code into the Miscellaneous HTML field. If there is code in it already, add the line below it.
  5. Click Save Configuration.
  6. Open System, Tools, Cache Management and click Flush Magento Cache.
From version 2.4.7, payment pages run a strict Content-Security-Policy. The chat shows at checkout only after your developer adds https://ottoai.sk to etc/csp_whitelist.xml in a custom module. By default the other pages run the policy in report-only mode, so the chat works there.

You can also follow the official Magento and Adobe Commerce help.

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.
Check the checkout too. If the chat is everywhere except there, it is the Content-Security-Policy from the warning above.

Product catalogue

A Heureka or Google Merchant (XML) feed is made by an extension from the Adobe Commerce Marketplace. You find the feed address in the extension settings.

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

The chat is everywhere except checkout

From version 2.4.7, checkout only runs scripts from allowed sources. Your developer adds https://ottoai.sk to etc/csp_whitelist.xml in a custom module.

I have several stores or languages (store views)

Miscellaneous HTML can be set for each store view separately. Add the code to every store view where you want the chat.

The store runs on PWA Studio or Edge Delivery Services

These storefronts do not use the design configuration from the admin, so Miscellaneous HTML has no effect there. Your developer adds the code to the storefront itself, on Edge Delivery Services to scripts/delayed.js.

I cannot see the Miscellaneous HTML field

Adobe Commerce as a Cloud Service has no such design settings, there your developer adds the code to the storefront. Otherwise ask your admin for access to Content, Design, Configuration.

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 Content, Design, Configuration, click Edit on the store view, delete the chat line from Miscellaneous HTML under Footer and click Save Configuration. Then click Flush Magento Cache in Cache Management.