The Chat Widget

The Scriv chat widget can be used to install Scriv on any website (like this one). Follow these steps to install it.

Prerequisites

To set up Scriv on your site you will first need to create a bot and make it public.

Installing the widget

Follow these steps to install the chat widget on your site.

  1. First ensure you have enabled your bot to be public within the settings.

  2. Then in your site’s <head> add the Scriv widget:

<script type='module' src='https://unpkg.com/closeis-chat@0.1.1/dist/closeis-chat/closeis-chat.esm.js'></script>
  1. Then, wherever you want to add the button to open Close.is, add a snippet like this:
<closeis-chat visible="false" team="INSERT YOUR TEAM HERE" bot="YOUR BOT ID" button-text="Let's Chat"></closeis-chat>
  1. Make sure to update your team and bot to match the IDs in your Close.is account.

Customizing the widget

You can customize the color and location of chat widget with CSS and CSS variables. You can also update the button text using the button-text attribute.

Here is an example changing the colors, text, and fixing the widget in the lower right corner:

<style>
  closeis-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    --button-background-color: blue;
    --button-background-color-hover: black;
    --button-text-color: white;
    --button-text-color-hover: yellow;
    --button-border-color: gray;
    --button-border-color-hover: black;
  }
</style>
<closeis-chat visible="false" team="your-team" bot="your-team" button-text="👋"></scriv-chat>

Z-Index

If the chatbot appears below other elements on the page you can increase the z-index of the chatbot by setting the --closeis-z-index CSS variable. The default value is 50.

<style>
  closeis-chat {
    --closeis-z-index: 1000;
  }
</style>

For more information, see the closeis-chat docs on NPM

Updated on
Conceptual Overview