How to Add Asyntai AI Chatbot to Umbraco

Platform:

Umbraco

HTML/Custom WordPress Shopify WooCommerce Wix Squarespace Webflow Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Umbraco Moodle

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: Edit Master Template (Recommended)

The easiest way to add the chatbot to all pages is by editing your Master template:

1. Log in to your Umbraco Backoffice
2. Go to Settings in the left sidebar
3. Expand Templates
4. Click on your Master template (or the main layout template your site uses)
5. Find the closing </body> tag
6. Paste your Asyntai embed code just before the </body> tag
7. Click "Save"

Alternative: Using Site Settings Document Type

For more flexibility, you can add a custom field to manage footer scripts:

1. Go to Settings → Document Types
2. Edit your Site Settings document type (or create one if it doesn't exist)
3. Add a new property called "Footer Scripts" with a Textarea data type
4. Save the Document Type
5. Go to Content and edit your Site Settings node
6. Paste your Asyntai embed code in the Footer Scripts field
7. In your Master template, add this code before </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Save both the content and template

Alternative: Using Scripts Folder

You can also create a JavaScript file in the Umbraco Backoffice:

1. Go to Settings → Scripts
2. Right-click on Scripts and select "Create"
3. Create a new file called asyntai-chatbot.js
4. Add the following code:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
5. Replace YOUR_WIDGET_ID with your actual widget ID
6. Save the file
7. Include this script in your Master template before </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Alternative: Page-Specific with RenderSection

If you only want the chatbot on specific pages:

1. In your Master template, add before </body>:
   @RenderSection("footerScripts", required: false)
2. In the specific page template where you want the chatbot, add:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

Step 3: Verify Installation

After saving your changes, visit your website 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.