Skip to content
Platforms

Blogger

How to add the Otto chat to a Blogger blog with the HTML/JavaScript gadget, how to check it and what to do if it does not show on mobile.

On this page

Blogger is Google’s free blogging service. You paste the chat code into an HTML/JavaScript gadget in your blog’s layout. 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 Blogger tile. It is under the More platforms tile, and you can also search for it.
  • Access to the blog as an admin, who can change the blog’s settings and design.

Chat code

On the Blogger 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. Sign in to Blogger and choose your blog.
  2. In the left menu, click Layout.
  3. In the area where you want the gadget, such as the sidebar or footer, click Add a Gadget.
  4. In the window that opens, choose HTML/JavaScript.
  5. Leave the title empty, paste the chat code into Content and click Save.
  6. Finally, save the layout with Save.
Otto ties itself to the blog address where the chat first appears. If you plan to use your own domain, connect it to the blog before you add the chat.

You can also follow the official Blogger 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.
The chat does not show in Layout. Open your published blog.

What Otto knows about your site

Otto answers from the pages of your website and from the knowledge you add in the panel. Once the chat runs on your site, turn on I have no XML feed, let Otto read my site in the panel under Settings, Catalogue. More in Reading your website.

Troubleshooting

The chat does not show on mobile

By default, Blogger’s mobile version shows only some gadgets, and HTML/JavaScript is not one of them. In Theme, Edit HTML, add mobile='yes' to the b:widget tag of the chat gadget and save.

An area of the layout has no Add a Gadget link

Some areas of a theme do not allow new gadgets or limit how many they hold. Put the gadget in another area, such as the sidebar or footer.

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 Layout, click Edit on the gadget with the chat code, remove it in the window and save the layout.