Integrate your bot into your Webflow site with ease using the embed code provided in the Share tab of your bot’s dashboard. Select the Webflow button to access tailored instructions for embedding your bot.

Embedding Your Bot

1. Navigate to the Share tab in your bot’s dashboard.
2. Click the Webflow button to copy the embed code.
3. Paste the code into your Webflow project’s custom code section (e.g., in the Head or Body section of your site or page settings).

The embed code supports various integration types, such as Standard, Popup, or Bubble, as detailed in the HTML & JavaScript Guide.

Triggering Bot Commands with Button Clicks

You can configure Webflow buttons to trigger bot commands, such as opening a popup. Follow these steps to set up a button to control your bot:

1. Assign a Button ID:

   • In Webflow, go to the Settings tab of your button element.
   • Add a unique ID (e.g., open-bot-button) to the button.

2. Add Event Listener Code:

   • In your bot’s embed code, include an event listener within the existing <script> tag to trigger a bot command (e.g., Bot.open()) when the button is clicked.

   document.getElementById('open-bot-button').addEventListener('click', (event) => {
     event.preventDefault();
     Bot.open();
   });

3. Embed the Full Script:

   • Combine the event listener with your bot’s embed code. Below is an example for a Popup embed that opens when one or more buttons are clicked:

   <script type="module">
     import Bot from 'https://cdn.jsdelivr.net/npm/@indite.io/js@0/dist/web.js';
    
     Bot.initPopup({
       bot: 'my-bot',
     });
    
     document.getElementById('open-bot-button-1').addEventListener('click', (event) => {
       event.preventDefault();
       Bot.open();
     });
    
     document.getElementById('open-bot-button-2').addEventListener('click', (event) => {
       event.preventDefault();
       Bot.open();
     });
   </script>

   Replace open-bot-button-1 and open-bot-button-2 with the IDs assigned to your button elements in Webflow.

Best Practices

• Unique IDs: Ensure each button has a unique ID to avoid conflicts.
• Prevent Default Behavior: Use event.preventDefault() in event listeners to prevent unintended button actions (e.g., form submissions).
• Testing: Preview your Webflow site to confirm the bot opens correctly when buttons are clicked.
• Customization: Explore advanced options like theming or preview messages in the HTML & JavaScript Guide.