Learn how to integrate your custom Chatbot into your Website with ease.

Integrating the Swiftron Chatbot into your website is simple and quick. With just one-time integration and no need for ongoing changes, you can enhance your customer engagement seamlessly. Follow these easy steps to get started:

Step 1: Copy the Integration Code

Go to Swiftron Integration Page and copy the following code:

<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
  • project-id: This is your unique Project ID and will be pre-filled.
  • lang: The target language for your chatbot. You can use:
    • Any valid language code from ISO 639 language codes (e.g., 'en' for English, 'de' for German).
    • 'auto', which selects the language based on the user's browser settings.
    • 'site', which uses the language specified in the website's HTML header. This reads the value from document.documentElement.lang and sets the chatbot's language accordingly.

Step 2: Paste the Code into Your Website

Using a Website Builder:

If you are using website builders like Jimdo, WordPress, or Squarespace, follow their instructions to insert custom code:

Managing your own Code:

Insert the copied integration code into the HTML of every page where you want the chatbot to appear. Here’s an example:

<! DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Site</title>
  </head>
  <body>
    <div>Your Content</div>
  </body>
  <script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"> </script>
</html>

Set Toggle Chatbot Button (Optional)

If you already have an existing communication box or want to create your own button for opening or closing the chatbot, you can easily integrate it by adding its ID in the 'Toggle Chatbot Button' settings on the Swiftron Integration Page.

Example:

<button id="btn-toggle-chatbot">Your Chatbot Icon</button>

Simply set the 'Toggle Chatbot Button' field to your button's ID, e.g. 'btn-toggle-chatbot'. The button type can be anything (e.g., div, span). You don’t need to add any JavaScript or event handlers; the Swiftron chatbot will automatically detect this button and handle the necessary logic.

If no element with the provided ID is found, or if the 'Toggle Chatbot Button' field is empty, Swiftron will create its own chatbot toggle button on your site.

Customize Chatbot Placement (Optional)

You can render the chatbot into a specific element by specifying its ID in the 'Customize Chatbot Placement' field on the Swiftron Integration Page. The chatbot will appear inside this element and replace any existing content within it.

In this case, no toggle chatbot button will be rendered or used. The chatbot will always be visible inside the specified element and cannot be minimized by the user.