Copilot Component

This guide provides instructions for integrating the Scout Copilot module into your website.

Before implementing this code, ensure you have configured a Copilot within the dashboard. Navigate to the /dashboard/integrations page to create a new Copilot. The Copilot's id can be obtained from its detail page.

To incorporate the Copilot module into your application, insert the following code:

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

After these steps, the Copilot component will be visible on your website.

Below, you'll find descriptions of different attributes that can be applied to the Copilot component. These attributes can be added directly to the co-pilot tag.

For instance, to conceal the Copilot, you can set the show attribute to false:

const chat = document.querySelector('co-pilot');
chat.setAttribute('show', false);

Required Attributes

Name
copilot_id
Type
string
Description
The ID of the Copilot, available on the Copilot's detail page.

Optional Attributes

Name
environment
Type
string
Description
Specifies the Copilot's environment, which defaults to "development". Set this to "production" upon deploying your application.
Name
user_id
Type
string
Description
Identifies the user interacting with the Copilot. If unset, the Copilot will generate a random ID and store it in local storage.
Name
show
Type
boolean
Description
Determines whether the component is visible, with a default of true.
Name
open
Type
boolean
Description
Indicates whether the Copilot is open, defaulting to false.
Name
show_minimize
Type
boolean
Description
Determines whether the minimize button is visible, with a default of true.
Name
height
Type
string
Description
The height of the Copilot, which defaults to "40vh".
Name
width
Type
string
Description
The width of the Copilot, which defaults to "25vw".
Name
message_bubble_max_width
Type
string
Description
The maximum width of the message bubble, which defaults to "95%".
Name
fab_height
Type
string
Description
The height of the FAB, which defaults to "40px".
Name
fab_width
Type
string
Description
The width of the FAB, which defaults to "40px".
Name
embedded
Type
boolean
Description
Determines whether the Copilot is "embedded" directly into the application interface, rather than appearing as a separate, floating component. Defaults to false. (See the Embedding the Copilot section for more information.)

Customizing the FAB

The Copilot's floating action button (FAB) can be customized by passing in a child html element with the slot attribute set to fab. For 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>

In the example above we are creating a simple FAB with a white background, a shadow, and an image and text inside. You can customize the FAB to your liking by changing the styles and content.

Embedding the Copilot

By default, the Copilot will be displayed as a floating action button (FAB) in the bottom right corner of the screen. To embed the Copilot within your website, set the embedded attribute to true. This will allow you to position the Copilot within your website's layout wherever you see fit.

Note: When embedding the Copilot, the open, show, and show_minimize attributes will be overridden.

Example embedded Copilot:

Embedded Copilot Example

<body>
    <div class="container">
        <h1>Embedded Copilot Example</h1>

        <co-pilot copilot_id="copilot_id" width="700px" height="500px"></co-pilot>

        <h2>Some Content</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.
        </p>
    </div>

    <script>
        const chat = document.querySelector('co-pilot')
        chat.embedded = true
    </script>
</body>