Documentation
Features
Widget

Widget

The chatjet.app chat widget can be used to add a chatjet.app-powered chatbot to any website (like this one). Follow these steps to install it.

Prerequisites

To set up the chatjet.app widget 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 chatjet.app widget javascript module:

<script type='module' src='https://unpkg.com/chatjetapp-widget@0.1.0/dist/chatjetapp-widget/chatjetapp-widget.esm.js'></script>

Then, wherever you want to add the button to open chatjet.app, add a snippet like this:

<chatjetapp-widget visible="false" team="demo" bot="demo" button-text="Let's Chat"></chatjetapp-widget>

Make sure to update the team and bot attributes to match the IDs in your chatjet.app 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>
  chatjetapp-widget {
    /* For reference, this is the default positioning
    position: fixed;
    right: 20px;
    bottom: 20px;
    */

    /* Changing the position to 'static' will place the button on the page wherever the <chatjetapp-widget> element is defined (instead of floating in the corner) */
    position: static;

    /* Changing the colors */
    --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>
<chatjetapp-widget visible="false" team="demo" bot="demo" button-text="👋"></chatjetapp-widget>

Z-Index

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

<style>
  chatjetapp-widget {
    --chatjetapp-widget-z-index: 1000;
  }
</style>

You can also use JavaScript to dynamically set widget properties. For detailed information about the supported js properties, html tag attributes and css properties, see the widget reference documentation.

KnowledgeWizard