Basic widget customization | AI Chatbot

AI Chatbot Guide v1

AI Chatbot

Version 1

This section covers basic modifications to the widget's size, position, and default settings to match your website's look and feel.

To change the location of the chatbot button on your page, use this code snippet, By default, this will place it at the top-right corner of the page.

#aichatbot-widget-button {
    position: fixed !important;
    top: 20px !important;       /* Distance from the top */
    right: 20px !important;     /* Distance from the right */
    z-index: 9999 !important;   /* Keeps the button above other contents of the page */
    transform: none !important;
}

You can adjust top and right values to change its position to fit your layout.

Resize the chat window

To set a custom ize for the chat window when it opens, use this code snippet. This makes it responsive, ensuring it fits well on any screen.

#aichatbot-widget-window {
    width: 700px !important;       /* Width of the chat window */
    height: 600px !important;      /* Height of the chat window */
    max-width: 90% !important;     /* Maximum width on smaller screens */
    max-height: 90% !important;    /* Maximum height on smaller screens */
}

max-width and max-height prevent the window from being too large on small screens.

Customize the button appearance

To adjust the size, shape, or appearance of the chatbot button, use this code snippet:

#aichatbot-widget-button {
    width: 80px !important;         /* Button width */
    height: 80px !important;        /* Button height */
    border-radius: 50% !important;  /* Circular shape */
    overflow: hidden !important;    /* Ensures content stays within shape */
    object-fit: contain !important; /* Keeps the image or icon within bounds */
}

border-radius: 50% makes the button circular. Change it to 0% for a square shape, or a smaller percentage (like 10%) for rounder corners.

Update "Enter Message" text

You can change the placeholder text Enter Message in the chat input area to something more personalized.

<ChatWindow 
    applicationId="APP_ID" 
    botId="BOT_ID" 
    stringSet={{ MESSAGE_INPUT__PLACE_HOLDER: 'Type your message here' }}
/>

Replace Type your message here with any text you want.

Set time display to your locale

To display timestamps in the chat widget in a specific language or format, use this customization:

<ChatWindow 
    applicationId="APP_ID" 
    botId="BOT_ID" 
    dateLocale={dateFns.locale.de}  /* Change 'de' to your locale code */
/>

Replace de with your preferred locale code. For example:
- en for English
- fr for French
This adjusts the date and time format based on the language you choose.

Custom container and stacking order

To control the entire widget container's position and stacking order on the page, use this code:

#aichatbot {
    position: fixed !important;
    z-index: 300 !important;
    top: 20px !important;
    right: 20px !important;
    width: 300px !important;
    height: 400px !important;
}

This controls the main container's position and size.
z-index keeps the widget above other page content.

On this page

Change widget position Resize the chat window Customize the button appearance Update "Enter Message" text Set time display to your locale Custom container and stacking order