Skip to main content

How To Embed Your Assistant To Your Website

Embedding your AI Assistant on your website can significantly enhance user engagement by providing immediate assistance or information to your visitors. This guide will walk you through the steps of embedding your AI Assistant widget and outline a strategy for incrementally introducing it to your audience.

Step by Step Guide​

Step 1: Configure Your Widget​

Before embedding the widget on your website, ensure it's fully configured to match your brand and desired user experience. Refer to the guide on configuring your AI Assistant widget for detailed instructions on setting titles, subtitles, avatars, colors, and more.

Step 2: Copy the Embed Script​

After configuring your widget, you should click on Embed Widget In Your Website button. If your AI Assistant is not public yet, you'll be asked to make it public before embedding it, otherwise a script will be displayed to you that you should copy. This script is a small piece of code that will integrate your AI Assistant widget into your website. Copy that script to your clipboard; you'll need it for the next step.

Step 3: Paste the Embed Script into Your Website's HTML​

Locate the HTML code of your website where you want the chat widget to appear. It's usually best to place the script just before the closing </body> tag to ensure the rest of your site loads before the widget does. Paste the copied embed script into the HTML file.

Step 4: Verify the Widget's Functionality​

After embedding the widget, visit your website to confirm that the widget appears and functions as expected. It's a good idea to test out different interactions with the AI Assistant to ensure it responds correctly.

info

We recommend an incremental release strategy as shown below. It will let you incrementally improve your AI Assistant for your users for a great user experience.

Incremental Release Strategy​

Releasing your AI Assistant to all users at once might seem tempting, but a phased approach allows you to gather feedback and make necessary adjustments, ensuring the best possible user experience. Here's a recommended approach:

Initial Testing (0% Exposure)​

  • Set AI Assistant Exposure to 0%: This ensures the widget is not visible to general visitors of your site.
  • Test Using a Special URL: Access your website by appending ?test-cbo=1 to the URL (e.g., https://mywebsite.com?test-cbo=1). This allows you to interact with the AI Assistant and make sure everything works as intended without exposing it to all visitors.

Phase 1: Soft Launch (20% Exposure)​

  • Adjust the Exposure to 20%: Start by exposing the AI Assistant to a smaller segment of your audience. Monitor how users interact with the assistant and gather feedback.
  • Analyze and Improve: Use this phase to refine the AI Assistant's responses and functionality based on user interactions and feedback.

Phase 2: Expanded Release (50% Exposure)​

  • Increase Exposure to 50%: With improvements made from the initial feedback, broaden the exposure to reach half of your site's visitors.
  • Continue to Monitor and Optimize: Keep an eye on user interactions, collecting data and feedback to further refine the AI Assistant's performance.

Final Phase: Full Launch (100% Exposure)​

  • Set Exposure to 100%: Once you are satisfied with the AI Assistant's performance and have addressed any feedback, increase the exposure to 100% to make the AI Assistant available to all site visitors.
  • Ongoing Optimization: Even after a full launch, continue to monitor user interactions and feedback for ongoing improvements.

By following these steps and adopting an incremental release strategy, you can ensure that your AI Assistant is well-received by your website's visitors and adds value to their experience.