Documentation
Features
Widget

Widget

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

Prerequisites

To set up the chatjetapp.com 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 chatjetapp.com 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 chatjetapp.com, 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 chatjetapp.com 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