Chat Widget Configurator

Used by backend to identify the assistant and apply rules.
Used for buttons, header and bot avatar
Used for user avatar
Use CSS units (px, rem, %)
Use CSS units (px, rem, %)
Size of the floating chat button
Distance from screen edges
How to Change Icons

Each icon can easily be customized using one of these methods:

  1. Quick Selection: Click on any of the suggested icon options
  2. Icon Gallery: Click "Change icon" to browse the full collection
  3. Adjust Size: Use the slider to make icons larger or smaller
  4. Advanced: For custom SVG icons, click on "Custom SVG"
Chat Button Icon - Shows on chat button

Current choice:

1. Choose an icon:

2. Adjust icon size:

Small Size Large

3. Chat bubble background:

Tip: If you enable transparent background, the chat button will use the primary color from the Theme tab instead of the custom color above.
Paste custom SVG code
User Avatar Icon - Shows next to user messages

Current choice:

1. Choose an icon:

2. Adjust icon size:

Small Size Large
Paste custom SVG code
Bot Avatar Icon - Shows next to bot messages

Current choice:

1. Choose an icon:

2. Adjust icon size:

Small Size Large
Paste custom SVG code
Send Button Icon - Shows on send message button

Current choice:

1. Choose an icon:

2. Adjust icon size:

Small Size Large
Paste custom SVG code

Your Assistants

Loading assistants...

Add New Assistant

The knowledge source for the assistant.
Auto-generated from the link (used for identification).
The website where the chat widget will be used.

Generated Code


                    

                

            

        

    


    
    
    

    
    

        

            

                
Choose an icon