SupportGenie
Back to Documentation

Widget Installation Guide

Basic Installation

Add the ChatSupport AI widget to your website in just one line of code

Copy and paste the following code snippet just before the closing </body> tag of your website:

HTML
<script src="https://supportgenie.online/widget.js" data-id="YOUR_WIDGET_ID"></script>

Replace YOUR_WIDGET_ID with the widget ID from your dashboard.

HTML Installation

Detailed HTML installation instructions

For a standard HTML website, add the following script tag before the closing </body> tag:

HTML
<script 
  src="https://supportgenie.online/widget.js" 
  data-id="YOUR_WIDGET_ID"
></script>
1
2
3
4

Advanced Configuration

Customize the widget behavior with additional attributes

You can customize the widget by adding additional data attributes:

HTML
<script 
  src="https://supportgenie.online/widget.js" 
  data-id="YOUR_WIDGET_ID"
  data-position="right"
  data-auto-open="false"
  data-auto-open-delay="5"
  data-primary-color="#000000"
></script>
1
2
3
4
5
6
7
8

Available Attributes:

  • data-positionWidget position (right/left)
  • data-auto-openAutomatically open the widget (true/false)
  • data-auto-open-delayDelay in seconds before auto-opening
  • data-primary-colorPrimary color (hex code)
  • data-text-colorText color for buttons and headers (hex code)
  • data-api-urlCustom API URL (for self-hosted instances)