Building and Deploying Your Scout Copilot

🎯 What is a Scout Copilot?

A Scout Copilot is an embeddable chat widget that connects directly to your workflows. Think of it as your AI assistant with a friendly chat interface that you can add to any website in minutes.

Perfect For:

Customer Support: Answer questions from your help docs
Product Assistance: Help users find information about your products
Internal Knowledge: Give your team instant access to company information
Documentation: Make your docs interactive and searchable

📋 Step-by-Step: How to Create Your Copilot

There are a couple of easy ways to get your Copilot up and running. If you’re feeling confident with workflows, you can build a custom one from scratch. Or, if you want to get started quickly, just use one of our ready to go templates.
- We recommend starting with the Basic Scout Copilot template, it’s simple to set up and only takes a few clicks to add to your workspace.
A few things to keep in mind if building your copilot from scratch
- A copilot workflow uses a different trigger/input than a traditional workflow. Your first block should be the "Copilot" input block. This special block receives messages from your embedded chat widget.

Lastly, instead of using an LLM block you will instead use the "Copilot Message" block. This will have the same configuration options as a standard LLM block but instead sends the AI response back to the chat widget.

👀 With that out of the way, lets take a look at the Basic Scout Copilot Template:

Lets break this workflow down block by block:

Copilot Input:
- This blocks takes the users message from the embedded chat widget and sends it to Scout.
Generate Thinking Message LLM Block
- Generates a short, friendly “thinking…” message tailored to the user’s question, this will appear while the assistant is searching for an answer.
Copilot Thinking Message Block:
- Displays the “thinking” message in the Copilot UI, using the output from the previous block.
Query Table Block:
- Searches your documentation using the user’s original message. Be sure to select the appropriate collection and table.
LLM "Query Enrichment" Block:
- Enhances the user’s query with extra keywords/context from the docs to improve search results.
Query Table Block:
- Searches your documentation collection again, this time using the enriched query from the LLM.
Copilot Message Block:
- Generates the final answer, this block contains a robust prompt which returns inline citations, increasing credibility and providing easy access to source material.
Extract Links Block:
- Extracts all markdown links (citations) from the Copilot Message output.
Return Links Block:
- Displays a formatted list of sources/citations at the end of the Copilot response.

🌐 Deploy Your Copilot

Step 1: Customize Your Copilot

In your Copilot workflow, click the "Settings" tab
"General Settings Tab" allows you to customize the Copilots name, upload a favicon image, set the favicon height and width as well as a few other parameters.
The "Styles Tab" allows you to fully customize the appearance of your copilot. Select a preconfigured style or head over to the custom tab and have full control over everything from background and border color, to link color and text color.
The "Installation tab" is where you will find your copilot_ID as well as the integration code snippet.

Step 2: Add to Your Website

Basic Embed (adds a floating chat bubble):

In the "Installation Tab" you will find your copilot_ID and snippet.

2. Add the snippet just before the </body> tag in your HTML:

html

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your website content here -->
    
    <!-- Add Scout Copilot just before closing body tag -->
    <scout-copilot copilot_id="YOUR_COPILOT_ID_HERE"></scout-copilot>
    <script type="module" src="https://copilot.scoutos.com/copilot.js"></script>
</body>
</html>

After Deployment:

✅ Monitor user interactions
✅ Update your collection based on common questions
✅ Refine your workflow prompts for better responses
✅ Gather user feedback for improvements

Platform-Specific Instructions:

WordPress:

Add to your theme's footer.php file before </body>
Or use a plugin like "Insert Headers and Footers"

Shopify:

Add to theme.liquid file before </body>

Squarespace:

Go to Settings → Advanced → Code Injection
Paste in the "Footer" section

Webflow:

Project Settings → Custom Code → Footer Code

Wix:

Go to Settings → Advanced → Tracking & Analytics
Click "+ New Tool" → Custom Code
Paste your embed code and set it to load on "All Pages"
Choose "Body - end" for placement

Framer:

Go to Site Settings (gear icon) → General → Custom Code
Paste your embed code in the "End of <body> tag" section
Or add an Embed component to individual pages if you prefer page-specific placement

🎉 Your AI Assistant is Live!

Congratulations! You've successfully:
- ✅ Built a Copilot workflow with specialized input/output blocks
- ✅ Deployed it on your website with simple embed code
- ✅ Created an interactive experience for your visitors
- ✅ Connected your knowledge base to a user-friendly chat interface

Your visitors now have instant access to your knowledge through an intelligent, conversational interface that provides accurate, source-backed answers 24/7!