How to Add Asyntai AI Chatbot to CrafterCMS

Platform:

CrafterCMS

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

Step 2: Add to FreeMarker Template (Recommended)

CrafterCMS uses FreeMarker (.ftl) templates for rendering pages. The easiest way to add the chatbot to all pages is by editing your main page template:

1. In Crafter Studio, go to Site Dashboard > Content Types or navigate to templates
2. Open your main page template (e.g., /templates/web/pages/home.ftl or the base layout)
3. Find the closing </body> tag
4. Paste your Asyntai embed code just before the </body> tag:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Save the file and publish through Crafter Studio

Alternative Method 1: Using Crafter Template Components

For better organization, create a dedicated component template for the chatbot widget:

1. In Crafter Studio, create a new template file at /templates/web/components/asyntai-widget.ftl
2. Add the following content to the component template:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Include it in your main layout template using a FreeMarker include directive:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternatively, if using Crafter's component rendering system, use:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Save both files and publish through Crafter Studio

Alternative Method 2: Using Crafter's Head/Scripts Configuration

CrafterCMS allows you to inject scripts globally through site configuration:

1. In Crafter Studio, navigate to Site Config > Configuration
2. Open the Engine Site Configuration file (site-config.xml)
3. Add a custom script injection configuration:
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
4. Alternatively, edit your base FreeMarker layout to read from site configuration and inject scripts dynamically:
   <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
5. Save and publish the configuration changes

Alternative Method 3: Using Groovy Controller

CrafterCMS supports Groovy scripts for server-side logic. You can use a controller to dynamically add the chatbot script:

1. Create a Groovy script in /scripts/pages/ (e.g., /scripts/pages/home.groovy or your site-wide controller)
2. Add the following code to inject the script URL into the template model:
   // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
3. Then reference the model variables in your FreeMarker template:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Save both the Groovy script and the template file
5. Publish the changes through Crafter Studio

Step 3: Publish and Verify

After making your changes, publish them through Crafter Studio:

1. In Crafter Studio, go to Site Dashboard
2. Review your changes in the My Recent Activity or Pending Approval section
3. Click Publish to deploy the changes to your live site
4. Visit your CrafterCMS website in a new browser tab or incognito window
5. You should see the chat widget button in the bottom right corner
6. Click it to make sure it opens and works correctly