The Scriv 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.

First in your site’s <head> add the Scriv widget:

<script type='module' src='https://unpkg.com/[email protected]/dist/scriv-chat/scriv-chat.esm.js'></script>

Then, wherever you want to add the button to open Scriv, add a snippet like this:

<scriv-chat visible="false" team="scriv" bot="scriv" button-text="Let's Chat"></scriv-chat>

Make sure to update your team and bot to match the IDs in your Scriv 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>
  scriv-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;
  }
</style>
<scriv-chat visible="false" team="scriv" bot="scriv" button-text="👋"></scriv-chat>