Skip to content
Platforms

Shopware

How to get the Otto chat into a Shopware 6 store through the theme template, an extension or Google Tag Manager, check it and find the Google feed.

On this page

Shopware 6 is a German platform for online stores. Its admin has no field for custom code, so the chat code gets into your store through the theme template (developer), an extension from the Shopware Store or Google Tag Manager. With an extension it takes about 15 minutes.

What you need

  • An Otto account. You find the chat code in the panel under Overview, on the Installation & integrations card, on the Shopware tile. It is under the More platforms tile, and you can also search for it.
  • Shopware 6. Tag Manager through the Analytics tab of the sales channel works from version 6.7.
  • For the template way: a developer or agency with access to the store code.
  • For the extension way: admin access with permission to install extensions.

Chat code

Google Tag Manager drops data- attributes from the tags it adds, so the chat would not know its key. That is why the Shopware tile gives you a short loader that starts the chat with its key. Click Copy code:

<script>(function(){var s=document.createElement('script');s.src='https://ottoai.sk/widget.js';s.async=true;s.setAttribute('data-otto-key','pk_vas_kluc');(document.head||document.documentElement).appendChild(s);})();</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

Theme template (developer)

  1. Send the chat code to the developer or agency that runs your store. You can use the email below.
  2. They extend @Storefront/storefront/base.html.twig in your theme or a custom plugin and add the code to the base_body_script block together with {{ parent() }}. The block sits just before </body>.
  3. After the deployment, open Settings, System, Caches & indexes and click Clear cache.

Extension from the Shopware Store

  1. In the admin, open Extensions, Store and find an extension that adds custom HTML code with a <script> tag to every page of your store.
  2. Add and install the extension, then activate it in Extensions, My extensions.
  3. In the extension settings, paste the chat code into the field for code at the end of the page or in the footer, and save.
  4. Open Settings, System, Caches & indexes and click Clear cache.

Google Tag Manager

  1. If you do not have Tag Manager in your store yet: in Sales Channels, open your store's sales channel and the Analytics tab.
  2. Enter your container ID GTM-… in Tracking ID, turn on Activate Google Analytics and click Save.
  3. In Google Tag Manager, click Tags, New, then Tag Configuration and choose Custom HTML.
  4. Paste the chat code into the HTML field, choose all pages (All Pages) as the trigger and save the tag.
  5. Click Submit and publish the changes with Publish.
With Shopware's built-in cookie bar, Tag Manager turned on in the Analytics tab loads only after the visitor accepts Google Analytics or Google Ads cookies. Until then the chat does not show either.
If Tracking ID holds a Google Analytics measurement ID (G-…), after replacing it with the Tag Manager ID you need to set up Google Analytics in Tag Manager.

You can also follow the official Shopware help.

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 our Shopware store so it is on every page just before </body>. I suggest extending @Storefront/storefront/base.html.twig in our theme and adding the code to the base_body_script block together with {{ parent() }}. Please add it to the live store, the chat links itself to the domain where it first appears. After the change, please clear the cache.

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.
For the Tag Manager way through the Analytics tab, allow Google Analytics in the cookie bar while checking, otherwise the chat does not show.

Product catalogue

You create the Google feed as a sales channel of the Product comparison type with the Google Shopping (XML) template, the address is in its settings under Export URL. You need a dynamic product group (Dynamic product group) first.

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 shows only after cookie consent

Shopware loads Tag Manager from the Analytics tab only after consent to Google cookies. If you want the chat right away, use the theme template or extension way.

Google Analytics tracking stopped after switching to Tag Manager

Tracking ID now loads Tag Manager instead of Google Analytics. Add a Google Analytics tag in Tag Manager.

We use Shopware in the cloud

The cloud edition installs only apps, not plugins, and the template can only be changed through an app. Use an app from the Shopware Store that adds HTML code, or Tag Manager.

The extension accepts only JavaScript without a script tag

The chat code is HTML with a <script> tag. Choose an extension that adds HTML code, or the theme template way.

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

Delete the code where you added it: your developer removes it from the template, in an extension delete it or deactivate the extension, in Tag Manager delete the tag and publish the changes. Then click Clear cache in Caches & indexes.