Skip to content
Platforms

Joomla

Where to add the Otto chat code in Joomla 5 and 6: a template field, a Custom module or a child template, and what to do if the chat does not show.

On this page

Joomla is a content management system with no admin field for site-wide code. Depending on your template, you add the chat code to its custom code field, to a Custom module or to a child template. 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 Joomla tile. It is under the More platforms tile, and you can also search for it.
  • An account in the Super Users group. By default, Joomla strips the <script> tag when other groups save a module (Global Configuration, Text Filters).
  • A developer only for the child template. You can do the other paths yourself.

Chat code

On the Joomla 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

Helix Ultimate or YOOtheme Pro template field

  1. Helix Ultimate: open System, Site Template Styles, click your Helix template style and then Template Options.
  2. On the Custom Code tab, paste the chat code into Before </body> and save the template settings.
  3. YOOtheme Pro: click YOOtheme in the admin, open Settings, Scripts and click Add Script.
  4. Choose a custom script placed in the body, paste the chat code including the <script> tag and click Save.
  5. Clear the cache: System, Clear Cache, Delete All.

Custom module

  1. In the user menu at the top right, open Edit Account, set Editor to Editor - None and save. The TinyMCE editor would strip the <script> tag.
  2. Open Content, Site Modules, click New and choose the Custom module type.
  3. Give the module a title, such as Chat, and paste the chat code into the text field.
  4. In Position, choose debug, which sits at the end of every page in the Cassiopeia template. With another template, pick a position that appears on all pages, such as the footer.
  5. On the Menu Assignment tab, choose On all pages and click Save.
  6. Clear the cache: System, Clear Cache, Delete All.

Child template (developer)

  1. Open System, Site Templates, Cassiopeia Details and Files and click Create Child Template. In Additional Template Styles, pick your current style so its settings carry over.
  2. In the child template, use New File to create index.php with the contents of Cassiopeia’s index.php, and paste the chat code just before </body>.
  3. In Site Template Styles, make the child template’s style the Default.
  4. Clear the cache: System, Clear Cache, Delete All.

If your template has no custom code field, use the Custom module. A child template suits sites run by a developer, and Joomla updates do not overwrite it.

Do not paste the code straight into the Cassiopeia template files. The next Joomla update would overwrite it.
Do not open the module in the TinyMCE editor later. Saving it there would strip the <script> tag.

You can also follow the official Joomla 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,

could you please add the attached Otto chat code to our Joomla website? It belongs on every page, just before </body>. Ideally in the template’s custom code field or in a child template, so that Joomla updates do not overwrite it. Then 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.
The chat shows on your public site, not in the Joomla admin.

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 code disappeared from the module after saving

The TinyMCE editor or a text filter removed it. Set your editor to Editor - None in Edit Account, save the module as a member of Super Users and paste the code again.

The code in the Helix template broke after saving

A security extension such as RSFirewall or Admin Tools by Akeeba can damage <script> tags. Add your IP address to its allow list and paste the code again.

The chat shows only on some pages

Some pages may use another template style, which the Assigned column in Site Template Styles shows. Each style has its own custom code field. For a module, check that Menu Assignment is set to On all pages.

With YOOtheme, the chat appears only after cookie consent

With the consent manager on, YOOtheme loads a script only after the visitor accepts the category you set for it. Scripts in the Functional category always load.

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 from the template field, or select the chat module in Content, Site Modules and choose Trash under Actions. Then clear the cache in System, Clear Cache.