Skip to content
Platforms

Webflow

Where to add the Otto chat code in Webflow, how to publish the site, how to check that the chat runs and what to do when it does not show.

On this page

Webflow is a website builder with the Designer editor. You add the chat code to the footer in Site settings and publish the site. 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 Webflow tile. It is under the More platforms tile, and you can also search for it.
  • A Site plan or a paid Core, Growth, Agency or Freelancer Workspace plan. Without one, Webflow does not allow custom code.
  • The Site manager or Designer role. The site can be published by a Site manager or a team member with Can publish turned on.

Chat code

On the Webflow 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. Open Site settings. In the Dashboard, they are under the three dots below the site thumbnail; in the Designer, in the menu under the Webflow logo in the top left.
  2. Go to the Custom code tab.
  3. Paste the chat code into Footer code. If the field already contains code, add the chat below it.
  4. Click Save changes.
  5. Publish the site: click Publish, check the domains where the chat should run and click Publish to selected domains.
Webflow allows custom code only with a Site plan or a paid Core, Growth, Agency or Freelancer Workspace plan.

You can also follow the official Webflow 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.
Webflow runs custom code in preview mode as well, but the chat reaches your site only after you publish. Custom code does not run in the expand canvas view.

Product catalogue

If you sell with Webflow Ecommerce, you get a Google feed URL in Settings, Ecommerce, Integrations: turn on the Google integration, copy the feed URL and save the setting. The feed works only while the site is published. If Otto does not accept it during verification, turn on I have no XML feed, let Otto read my site.

Troubleshooting

I cannot save the code in Custom code

Only the Site manager and Designer roles can add custom code, and only on a site with a Site plan or a paid Workspace plan. Check the plan and your role with the Workspace owner.

The chat shows on .webflow.io but not on my domain

You probably published only to the webflow.io address. Click Publish, check your own domain too and publish. Otto then moves to your own domain by itself.

I do not see the chat in the Designer

Webflow does not run custom code in the expand canvas view. Check the chat in preview mode or on the published site.

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 Site settings, on the Custom code tab, delete the chat code from Footer code, click Save changes and publish the site again.