Implementing Scout’s Command Module

Guide to tntegrating the command component on your website

Before implementing this code, you’ll want to build an Workflow in Scout. You can grab the Workflow’s id on its detail page. You will also need your org’s public key, which you can find on the settings page.

Adding the widget to your website

To add the Command module to your own application, include the following in your <head> tag:

1<link rel="stylesheet" href="https://assets.scoutos.com/cmd/style.css" />
2<script async src="https://assets.scoutos.com/cmd/iife.js"></script>

Then include this empty <div> tag right before your closing </body> tag. Set the data-app-id value to the Workflow id.

1<div id="scout-cmd" data-app-id="your-workflow-id" data-public-key="org-public-key"></div>

Binding the cmd widget open function to a DOM element

If you want to trigger the cmd module to open when a DOM element is clicked, you can add the id scout-cmd-trigger to the element. If you would like to use the styling to put a button on the bottom right of the screen, you can use class cmd_main-container-button, but you can use any element/styling you want.

1<button
2    class="cmd_main-container-button"
3    id="scout-cmd-trigger"
4>    
5    Ask AI
6</button>

Setting custom hotkey

By default, the widget will show when a user clicks cmd + k. If you would like it to trigger on another key besides k, you can set it on the data-cmd-hotkey attribute. In the example below, the cmd will launch when the user keys in cmd + i.

1<div id="scout-cmd" data-app-id="your-workflow-id" data-cmd-hotkey="i" data-public-key="org-public-key"></div>

Disable hotkey

By default, the widget will show when a user clicks cmd + k. If you would like to disable that, you can set the data-hotkey-disable attribute to 'true'.

1<div id="scout-cmd" data-app-id="your-workflow-id" data-hotkey-disable="true" data-public-key="org-public-key"></div>

Adding Custom Colors to the Command Component

To customize the colors of the command component, go to the app page and open the side menu by clicking the “i” icon on the top right. You should see a section called “Command Component Settings”. You can change the colors there.

Suggested Questions

The suggested questions are the questions that are shown to the user when they click on the command component. You can change the suggested questions in the app settings menu, under the “Command Component Settings” section.

Set Display Name

The display name used for the bot in the command component is the name of the app. You can change the name of the app in the app page.

Set Avatar

The avatar used for the bot in the command component is the avatar of the app. You can change the avatar of the app in the app page.