Chat Widget

Chat Widget

Easy Guide to Add Botco.ai Chatbot to Your Website

Excited to engage your website visitors with a smart chatbot? Let's get your Botco.ai chatbot live! Below you'll find straightforward steps to add your chatbot to your site, along with some nifty tweaks to make it behave just the way you want it to.

First Things First: Placing the Chatbot on Your Site

You'll get a piece of code when you're setting up your chatbot for deployment. Just copy and paste it into your website's HTML, and you're good to go! It looks something like this:

javascriptCopy code
// This little script tag? It’s your chatbot’s magic portal onto your webpage.
<script src="https://widget.botco.ai/prod/latest/widget.js"></script>

// This part puts that handy chatbot icon on your page.
<script>
  BotcoWebchat.mount({
    apiKey: 'YOUR_UNIQUE_KEY'
  });
</script>

Customize When and How Your Chatbot Pops Up

Want to control when your chatbot says hello to your visitors? Here’s how:

javascript
// This bit of code keeps your chatbot politely tucked away until it’s called upon.
<script>
  BotcoWebchat.mount({
    apiKey: 'YOUR_UNIQUE_KEY',
    open: false // Set this to 'true' to have it pop up automatically.
  });
</script>

Or if you want it to start with a special message or on a particular topic:

javascript
// Want to start a specific conversation? Use a referral code like this.
<script>
  BotcoWebchat.mount({
    apiKey: 'YOUR_UNIQUE_KEY',
    referralCode: "SPECIAL_TOPIC_CODE" // Replace with your actual referral code.
  });
</script>

Get Creative with Your Chatbot's Look

Feeling fancy? Adjust the chatbot's size and position to suit your site's style. Here's an example of how to do it:

javascript
// Set the chatbot's dimensions and where it sits on your page.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  height: '700px', // How tall it is.
  width: '30rem', // How wide it is.
  rightOffset: '50px', // How far from the right edge of the screen.
  bottomOffset: '50px', // How far from the bottom of the screen.
});

Full Screen and More

To have your chatbot go full screen, use:

javascript
// Max out on chatbot real estate with a full-screen view.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  fullScreen: true // Voila, full screen!
});

Respect Your Visitor's Privacy

If you want to make sure your chatbot forgets the conversation after it's closed, set saveHistory to false:

javascript
// Amnesia mode: the chatbot won't remember past chats.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  saveHistory: false
});

Keep the Chatbot Tidy

To minimize the chatbot icon when it's not in use:

javascript
// This keeps your chatbot icon out of the way until needed.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  closeOnClick: true // The chat icon hides after the chat is closed.
});

Customize the Chatbot Entry Point

If you have a specific image or button on your site you want to use to activate the chatbot:

javascript
// Swap out our icon for your custom image or element as the chat trigger.
$("#your-image-id").click(() => {
  BotcoWebchat.open(); // Replace '#your-image-id' with your element's ID.
});

Set the Stacking Order with Z-Index

Decide which elements come first visually on your webpage:

javascript
// Use Z-index to layer the chatbot icon over or under other page elements.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  zIndex: 9999 // Elements with a higher z-index will be on top.
});

Position Relative to Another Element

Position the chatbot relative to another element on your page, such as a cookie banner:

javascript
// This positions your chatbot relative to another page element.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  relativeElement: "#your-element-selector" // Replace with your element's selector.
});

Copilot widget

Introducing our new AI-driven Copilot chat widget, designed to feel more like a smart assistant than a traditional chatbot. With dynamic prompts and a sleek, responsive design, it highlights AI-powered support to offer users a more helpful, engaging experience.

// Botco Installation
<script src="https://widget.botco.ai/prod/latest/widget.js"></script>
<script>

// Note: this installs the Botco code but does not display the icon
<script>
  BotcoWebchat.mount({
    apiKey: 'YOUR_KEY',
    copilot: {
      enabled: true,
      cta: 'Ask CoPilot', // Carlton CoPilot, Ask Ana, etc...
      questions: [ // Customers can add whatever they want
        "What are your locations?",
        "What is your pricing?",
        "What is your refund policy?",
        "What are your hours of operation?",
      ],
    }
  });
</script>

Event Subscriptions

React to specific events in your chatbot's lifecycle. Check the documentation for a list of events and how to subscribe to them.

Special Scheduling

You may want to show the chatbot only at certain times. While we don't recommend managing this with JavaScript due to our built-in scheduling features, if you need to, you can check our time-based attributes documentation.

Passing Attributes at Mount Time

For a more personalized chat experience, you can pass user-specific attributes when the chatbot loads. Refer to our guide on attributes at mount time for detailed instructions.

Hide the Close Button on Mobile

Prefer a clean look on mobile without the close button?

javascript
// Hides the close button on mobile devices for a cleaner look.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  hideCloseButtonOnMobile: true
});

Convert to a Side Flag on Close

Change the chatbot to a discreet side flag when not in use:

javascript
// Converts the chatbot to a side flag when minimized.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  closeToSide: true
});

Keep the Chatbot Minimized

Maintain the chatbot in a minimized state even when navigating to new pages:

javascript
// Keeps the chatbot minimized across different pages on your site.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  keepGreetingMinimize: true
});

Disable Keyboard for Non-interactive Blocks

Only show the keyboard when it's needed for user input:

javascript
// Disables the keyboard except for when the user needs to type in a response.
BotcoWebchat.mount({
  apiKey: 'YOUR_UNIQUE_KEY',
  disableKeyboard: true
});

Other Handy Tweaks

Here are some more options to play around with:

  • closeToSide: Minimize the chatbot to a small flag instead of closing.
  • keepGreetingMinimize: Keep the chatbot minimized across different pages.
  • disableKeyboard: Disable the keyboard until it's needed for input.

For each of these, just add them into the mount command with true or false depending on what you want to do.

← Previous

Card Types