Scout Copilot

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.

Adding the Widget to Your Website

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

1<co-pilot copilot_id="YOUR_COPILOT_ID_HERE"></co-pilot>
2<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:

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

Required Attributes

copilot_id
stringRequired

The copilot_id is the unique identifier of the Copilot, available on the Copilot’s detail page. This ID is required for proper functionality.

Optional Attributes

environment
string

Specifies the Copilot’s environment, which defaults to "development". Set this to "production" when deploying your application.

user_id
string

Identifies the user interacting with the Copilot. If not set, a random ID will be generated and stored in local storage.

show
booleanDefaults to true

Determines whether the component is visible. The default value is true.

open
boolean

Indicates whether the Copilot is open. It defaults to false.

show_minimize
booleanDefaults to true

Specifies whether the minimize button is visible, with a default value of true.

height
string

The height of the Copilot component. The default value is "40vh".

width
string

The width of the Copilot component. The default value is "25vw".

message_bubble_max_width
string

Specifies the maximum width of the message bubble. Defaults to "95%".

fab_height
string

The height of the floating action button (FAB). Defaults to "40px".

fab_width
string

The width of the FAB. Defaults to "40px".

embedded
booleanDefaults to false

Determines whether the Copilot is embedded directly into the application interface, rather than appearing as a floating component. It 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:

1<co-pilot copilot_id="ID">
2    <div
3    slot="fab"
4    style="
5        background-color: white;
6        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12),
7        0px 1px 2px rgba(0, 0, 0, 0.24);
8    "
9    >
10    <img
11        style="width: 40px; height: 40px; margin-bottom: 5px"
12        src="IMG_URL"
13    />
14    <span style="color: black; font-weight: 500">Ask AI</span>
15    </div>
16</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:

1<body>
2    <div class="container">
3        <h1>Embedded Copilot Example</h1>
4
5        <co-pilot copilot_id="copilot_id" width="700px" height="500px"></co-pilot>
6
7        <h2>Some Content</h2>
8        <p>
9            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
10            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
11            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
12            commodo consequat.
13        </p>
14    </div>
15
16    <script>
17        const chat = document.querySelector('co-pilot')
18        chat.embedded = true
19    </script>
20</body>

In the example above, the Copilot is embedded within the .container div and it is given a width of 700px and a height of 500px.