Interactive Website Assistants Made Easy: Crafting and Deploying an AI Chatbot to your Website

Are you tired of visitors navigating your website feeling lost or overwhelmed? Imagine having a solution right at your fingertips that not only guides them seamlessly through your content but also engages them on a whole new level.

By implementing this interactive assistant, you’re not just enhancing your website’s user experience; you’re transforming it.

Whether you’re in need of an AI-powered sales assistant to streamline lead generation and warming, or a documentation tool tailored for developers, this quick how-to will guide you through each step of the process, empowering you to create a website that captivates and converts.

First thing is to create an App that we will connect to the new copilot, if you have’t already done so check out how to spin up a simple developer chatbot bot here.

Now, we can create our copilot. To do so we’ll open the integrations tab found on the left hand menu.

After naming your new copilot you will land on the copilot builder page. From here you can customize your copilots appearance to fit your website’s design, from uploading your logo, to changing the loading message.

Once you have styled the copilot to your liking its time to deploy it on your site. To do this, simply copy the code snippet below:

<co-pilot copilot_id="YOUR_COPILOT_ID_HERE"></co-pilot>
<script type="module" src="https://ui.scoutos.com/copilot.js"></script>

Copilot ID can be found when on the copilot builder dashboard at the end of the URL.

After adding the code, the copilot component will become visible on your website.

The next few steps are optional. If desired, the interactive button that users will click to interact with your copilot, the floating action button (FAB), can also be customized to fit your websites theme. Below is an example:

<co-pilot copilot_id="ID">
    <div
    slot="fab"
    style="
        background-color: white;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12),
        0px 1px 2px rgba(0, 0, 0, 0.24);
    "
    >
    <img
        style="width: 40px; height: 40px; margin-bottom: 5px"
        src="IMG_URL"
    />
    <span style="color: black; font-weight: 500">Ask AI</span>
    </div>
</co-pilot>

Lastly, for those wanting to further customize the copilot component, you can add different attributes directly to the copilots tag. These attributes will allow you to modify the behavior and appearance of your copilot. A full list of available attributes and their descriptions can be found here.

After you’ve customized your copilot, it’s crucial to test it to ensure everything works as expected. Navigate through your website and interact with the copilot to check its functionality and appearance.

By following these steps, you can have your copilot or virtual assistant up and running in no time.

Head on over to www.scoutos.com to spin up your custom copilot or chatbot.

As always, we’re more than happy to help, if you have any questions or need assistance be sure to check out the Scout community slack channel.