![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-9f09e940-0c28-48c3-b149-a6abc29230c3-DOCS IMAGE LIGHT.png)
![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-2e72ef6f-071e-4557-b985-54461fa346b7-DOCS IMAGE DARK.png)
Popup AI Chatbot
The popup AI Chatbot can be embedded in your product to provide users with a convenient assistant that answers questions using information from your docs. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a popup on your screen.
Installation Code
Insert the script below into the head of your product's index.html file.
Popup AI Chatbot Script
Mount Properties
These are the properties you pass in when mounting your Umbria component as shown above. They are used to initialize and stylize your Umbria component.
Required Properties
Property | Description | Data Type |
|---|---|---|
| The id of the site you wish your chatbot to pull answers from; can be found in your Site Settings | string |
| Key(s) to press to trigger chatbot | TKeyCombo |
TKeyCombo
This data type specifies a hotkey combination. An example for the hotkey Ctrl + c is provided below.
Style Properties (Optional)
These optional properties allow you to customize the Fullscreen AI Chatbot including changes to theme colors, wording, and size.
Property | Description | Data Type | Default |
|---|---|---|---|
| Control the stacking order of the chatbot on the webpage |
|
|
| Width of the chatbot |
|
|
| Height of the chatbot |
|
|
| Positions chatbot relative to right-hand side of screen |
|
|
| Positions chatbot relative to bottom side of screen |
|
|
| Color of header background in chatbot |
|
|
| Color of icon in header of chatbot |
|
|
| Color of header text in chatbot |
|
|
| Color of icons in chatbot answers |
|
|
| Color of border on icons in chatbot answers |
|
|
| Color of search button icon in chatbot |
|
|
| Color of search button background in chatbot |
|
|
| Title found at the top of the chatbot |
|
|
| The initial message from the chatbot to the user |
|
|
| The message that is a placeholder in the search bar |
|
|
| The color of the magnifying glass icon found to the right of the search bar |
|
|
| The color of the background of the magnifying glass icon found to the right of the search bar |
|
|
| The title found at the top of the chatbot |
|
|
| The text of the initial message sent by the chatbot |
|
|
| The placeholder in the chatbot searchbar |
|
|
| Whether or not to show the floating circular badge which can be used to trigger the chatbot |
|
|
| Background color of the floating badge |
|
|
| Color of the icon of the floating badge |
|
|
| Positions floating badge relative to right-hand side of screen |
|
|
| Positions floating badge relative to bottom of screen |
|
|
| Radius of floating badge |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot-popup event function can be invoked to make this chatbot appear.
For example, this function can be called when clicking an icon or button to trigger this chatbot.
file.tsx
Update Chatbot
The update-chatbot-popup event function can be invoked to restyle the chatbot programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the chatbot for light-mode or dark-mode programmatically or to customize the title of the chatbot to use your user.
file.tsx
Full Example
In the example below, we mount the chatbot-popup component to our site 663bce9d7c83fec5f654479a, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 500, stylize the height to be 350, and set the floating badge to appear so users can use the popup chatbot at any time by clicking the badge.
Popup AI Chatbot Script with Customization
Popup AI Chatbot
The popup AI Chatbot can be embedded in your product to provide users with a convenient assistant that answers questions using information from your docs. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a popup on your screen.
Installation Code
Insert the script below into the head of your product's index.html file.
Popup AI Chatbot Script
Mount Properties
These are the properties you pass in when mounting your Umbria component as shown above. They are used to initialize and stylize your Umbria component.
Required Properties
Property | Description | Data Type |
|---|---|---|
| The id of the site you wish your chatbot to pull answers from; can be found in your Site Settings | string |
| Key(s) to press to trigger chatbot | TKeyCombo |
TKeyCombo
This data type specifies a hotkey combination. An example for the hotkey Ctrl + c is provided below.
Style Properties (Optional)
These optional properties allow you to customize the Fullscreen AI Chatbot including changes to theme colors, wording, and size.
Property | Description | Data Type | Default |
|---|---|---|---|
| Control the stacking order of the chatbot on the webpage |
|
|
| Width of the chatbot |
|
|
| Height of the chatbot |
|
|
| Positions chatbot relative to right-hand side of screen |
|
|
| Positions chatbot relative to bottom side of screen |
|
|
| Color of header background in chatbot |
|
|
| Color of icon in header of chatbot |
|
|
| Color of header text in chatbot |
|
|
| Color of icons in chatbot answers |
|
|
| Color of border on icons in chatbot answers |
|
|
| Color of search button icon in chatbot |
|
|
| Color of search button background in chatbot |
|
|
| Title found at the top of the chatbot |
|
|
| The initial message from the chatbot to the user |
|
|
| The message that is a placeholder in the search bar |
|
|
| The color of the magnifying glass icon found to the right of the search bar |
|
|
| The color of the background of the magnifying glass icon found to the right of the search bar |
|
|
| The title found at the top of the chatbot |
|
|
| The text of the initial message sent by the chatbot |
|
|
| The placeholder in the chatbot searchbar |
|
|
| Whether or not to show the floating circular badge which can be used to trigger the chatbot |
|
|
| Background color of the floating badge |
|
|
| Color of the icon of the floating badge |
|
|
| Positions floating badge relative to right-hand side of screen |
|
|
| Positions floating badge relative to bottom of screen |
|
|
| Radius of floating badge |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot-popup event function can be invoked to make this chatbot appear.
For example, this function can be called when clicking an icon or button to trigger this chatbot.
file.tsx
Update Chatbot
The update-chatbot-popup event function can be invoked to restyle the chatbot programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the chatbot for light-mode or dark-mode programmatically or to customize the title of the chatbot to use your user.
file.tsx
Full Example
In the example below, we mount the chatbot-popup component to our site 663bce9d7c83fec5f654479a, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 500, stylize the height to be 350, and set the floating badge to appear so users can use the popup chatbot at any time by clicking the badge.
Popup AI Chatbot Script with Customization
Popup AI Chatbot
The popup AI Chatbot can be embedded in your product to provide users with a convenient assistant that answers questions using information from your docs. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a popup on your screen.
Installation Code
Insert the script below into the head of your product's index.html file.
Popup AI Chatbot Script
Mount Properties
These are the properties you pass in when mounting your Umbria component as shown above. They are used to initialize and stylize your Umbria component.
Required Properties
Property | Description | Data Type |
|---|---|---|
| The id of the site you wish your chatbot to pull answers from; can be found in your Site Settings | string |
| Key(s) to press to trigger chatbot | TKeyCombo |
TKeyCombo
This data type specifies a hotkey combination. An example for the hotkey Ctrl + c is provided below.
Style Properties (Optional)
These optional properties allow you to customize the Fullscreen AI Chatbot including changes to theme colors, wording, and size.
Property | Description | Data Type | Default |
|---|---|---|---|
| Control the stacking order of the chatbot on the webpage |
|
|
| Width of the chatbot |
|
|
| Height of the chatbot |
|
|
| Positions chatbot relative to right-hand side of screen |
|
|
| Positions chatbot relative to bottom side of screen |
|
|
| Color of header background in chatbot |
|
|
| Color of icon in header of chatbot |
|
|
| Color of header text in chatbot |
|
|
| Color of icons in chatbot answers |
|
|
| Color of border on icons in chatbot answers |
|
|
| Color of search button icon in chatbot |
|
|
| Color of search button background in chatbot |
|
|
| Title found at the top of the chatbot |
|
|
| The initial message from the chatbot to the user |
|
|
| The message that is a placeholder in the search bar |
|
|
| The color of the magnifying glass icon found to the right of the search bar |
|
|
| The color of the background of the magnifying glass icon found to the right of the search bar |
|
|
| The title found at the top of the chatbot |
|
|
| The text of the initial message sent by the chatbot |
|
|
| The placeholder in the chatbot searchbar |
|
|
| Whether or not to show the floating circular badge which can be used to trigger the chatbot |
|
|
| Background color of the floating badge |
|
|
| Color of the icon of the floating badge |
|
|
| Positions floating badge relative to right-hand side of screen |
|
|
| Positions floating badge relative to bottom of screen |
|
|
| Radius of floating badge |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot-popup event function can be invoked to make this chatbot appear.
For example, this function can be called when clicking an icon or button to trigger this chatbot.
file.tsx
Update Chatbot
The update-chatbot-popup event function can be invoked to restyle the chatbot programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the chatbot for light-mode or dark-mode programmatically or to customize the title of the chatbot to use your user.
file.tsx
Full Example
In the example below, we mount the chatbot-popup component to our site 663bce9d7c83fec5f654479a, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 500, stylize the height to be 350, and set the floating badge to appear so users can use the popup chatbot at any time by clicking the badge.
Popup AI Chatbot Script with Customization