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.


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='[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:

  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;
<scriv-chat visible="false" team="scriv" bot="scriv" button-text="👋"></scriv-chat>