Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Manage Websites
Customization
Widget Colors AI Assistant Name Initial Message Widget Position Auto-Trigger Notification Bubble Unread Badge Instruction Mode Ask Questions Use Emoji Collect Emails Collect Phone Numbers Smart Lead Capture Localization Hide Branding Privacy Link Custom Notice Transcript Download New Conversation Conversation History Tagline & Status Dot Speech to Text Chat Icon Company Logo Character Limit Temperature
AI Instructions Tips Compare Plans
Features
Website Crawl Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Real-Time Data Feed Max Team Members Single Sign-On Include Images Image Vision Translation Widget Localization Leads Smart Lead Capture Support Tickets Bookings Exclude Pages Smarter Model Enable Thinking Reply Suggestions Follow-up Messages Speech to Text Transcript Download Embedded Chat
Analytics
Chat Analytics Chat Logs
Integrations
REST API Instagram Messenger WhatsApp Zapier Email Mobile Apps
Other
Add to Home Screen Custom Open Button

How to Add Asyntai AI Chatbot to Framer

Step-by-step guide for Framer websites

Get Embed Code
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

Step 1: Get Your Embed Code

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Note: The code above is just an example. You must copy your own unique embed code from your Dashboard as it contains your personal widget ID.

Step 2: Using Custom Code (Recommended)

Framer has a built-in Custom Code feature that makes adding scripts easy:

  1. Open your Framer project
  2. Click the gear icon (Site Settings) in the top left
  3. Go to the "Custom Code" section
  4. Click the "Add Script" button
  5. Paste your Asyntai embed code in the script field
  6. Set the placement to "End of <body> tag"
  7. Save and publish your site

Tip: Placing the script at the "End of <body> tag" ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading. Framer also offers "Start of <head>" and "End of <head>" options, but end of body is preferred.

Alternative: Using Code Component

If you prefer to add the chatbot using a Code component:

  1. In the Framer editor, open the page where you want the chatbot
  2. Add a Code component to your canvas
  3. Paste the Asyntai embed code into the component
  4. Position it in your layout as needed

Note: The Custom Code method is preferred as it applies the chatbot site-wide across all pages. The Code component method may only add the chatbot to the specific page where you place the component.

Step 3: Verify Installation

After publishing your changes, visit your Framer site in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to make sure it opens and works correctly.

Not seeing the widget? Make sure you saved and published your site after adding the code. Try clearing your browser cache or viewing in an incognito window. If using a custom domain, changes may take a few minutes to propagate.