Skip to main content
A floating chat bubble is the fastest way to add Franko to any page. It docks to your page (bottom-right or bottom-left depending on your configuration) and opens your modal when clicked.

​
1 · Copy your snippet

  1. In the Connect tab choose Embed a Chat Bubble.
  2. Click Copy. The snippet already contains your modal slug and interface settings.
<script>
  … generated code …
</script>

​
2 · Add to your site

Paste the snippet just before the closing </body> tag. Installation options:
ScenarioHow to implement
Show on every pageAdd snippet to your main template/layout file
Show only on specific pagesAdd snippet only to those pages
Show only to logged-in usersWrap the snippet in your auth check:
{% if USER_IS_AUTHENTICATED %}
  <!-- snippet here -->
{% endif %}
Show based on user roleCreate logic to conditionally render:
{% if user.role == 'premium' %}
  <!-- snippet here -->
{% endif %}
The script loads asynchronously and is less than 5kb so it won’t slow down your page.

​
3 · Customize appearance

To change your chat bubble design:
  1. Go to the Interface tab in your dashboard
  2. Update colors, position, or text
  3. Copy the updated snippet and replace it on your site
Interface changes in Interface tab do not require updating your embed code.

​
4 · Test your installation

  1. Reload the page & look for your chat bubble in the bottom corner.
  2. Click it – the modal should open instantly.
If nothing appears, check the browser console for errors.

​
Troubleshooting

SymptomPossible CauseFix
Bubble not visibleScript blocked by CSP / ad-blockerAllow /embed.js and /embed/* in your CSP
Mixed-content warningSite served over HTTPUse HTTPS for both your site & Franko
Modal opens but is blankJavaScript conflictCheck console for errors; ensure no global FrankoModal conflicts
Wrong modal opens, or all bubbles open same modalMultiple Franko snippets loaded on same pageUse only one Franko snippet per page.
Need help? Email fletcher@franko.ai
⌘I