Widget Customization

Customize your SupportGenie widget to match your brand identity and provide the best user experience for your visitors.

Color Customization

Customize the colors of your widget to match your brand

Available Color Options:

Primary Color
Used for the widget button, headers, and accent elements
Background Color
The main background of the chat window
Text Color
Color of text in buttons and headers
User Message Color
Background color for user message bubbles
Bot Message Color
Background color for bot message bubbles

How to Set Colors:

Option 1: Using data attributes

HTML

<script 
  src="https://supportgenie.online/widget.js" 
  data-id="YOUR_WIDGET_ID"
  data-primary-color="#3B82F6"
  data-background-color="#FFFFFF"
  data-text-color="#1F2937"
  data-user-message-color="#F3F4F6"
  data-bot-message-color="#E5E7EB"
></script>

Option 2: Using the dashboard

Log in to your SupportGenie dashboard
Navigate to Widgets > [Your Widget]
Click on the "Appearance" tab
Use the color pickers to select your colors
Click "Save Changes"

Widget Position & Size

Customize the position and size of your chat widget

Position Options:

Bottom Right

Bottom Left

Size Options:

Small

Medium

Large

How to Set Position & Size:

Using data attributes

HTML

<script 
  src="https://supportgenie.online/widget.js" 
  data-id="YOUR_WIDGET_ID"
  data-position="right"
  data-button-size="medium"
  data-offset-bottom="20"
  data-offset-side="20"
></script>

Available Position Attributes:

data-position: "right" or "left"
data-button-size: "small", "medium", or "large"
data-offset-bottom: Distance from bottom in pixels
data-offset-side: Distance from side in pixels