![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)
Fullscreen AI Chatbot
Much like the AI Assistant on your Umbria-made documentation, this embeddable AI Chatbot uses information from your docs to answer your users questions. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a modal and takes up the full screen in your product.
Installation Code
Insert the script below into the head of your product's index.html file.
Fullscreen 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 |
|
|
| 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 color of the sparkle icon in the main section of the chatbot |
|
|
| The color of the border of the sparkle icon in the main section of the chatbot |
|
|
| The color of the title found at the top of the chatbot |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot 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 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-fullscreen component to our site 6642969d49cf72081e666240, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 800, stylize the height to be 600, and set the title to be AI Docs Chatbot
Fullscreen AI Chatbot Script with Customization
Fullscreen AI Chatbot
Much like the AI Assistant on your Umbria-made documentation, this embeddable AI Chatbot uses information from your docs to answer your users questions. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a modal and takes up the full screen in your product.
Installation Code
Insert the script below into the head of your product's index.html file.
Fullscreen 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 |
|
|
| 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 color of the sparkle icon in the main section of the chatbot |
|
|
| The color of the border of the sparkle icon in the main section of the chatbot |
|
|
| The color of the title found at the top of the chatbot |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot 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 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-fullscreen component to our site 6642969d49cf72081e666240, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 800, stylize the height to be 600, and set the title to be AI Docs Chatbot
Fullscreen AI Chatbot Script with Customization
Fullscreen AI Chatbot
Much like the AI Assistant on your Umbria-made documentation, this embeddable AI Chatbot uses information from your docs to answer your users questions. You can customize how it looks and how it is triggered by your user from within your product.
It displays as a modal and takes up the full screen in your product.
Installation Code
Insert the script below into the head of your product's index.html file.
Fullscreen 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 |
|
|
| 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 color of the sparkle icon in the main section of the chatbot |
|
|
| The color of the border of the sparkle icon in the main section of the chatbot |
|
|
| The color of the title found at the top of the chatbot |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your chatbot from your code.
Open Chatbot
The open-chatbot 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 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-fullscreen component to our site 6642969d49cf72081e666240, configure it to be opened with the hotkey ctrl + alt + 2, stylize the width to be 800, stylize the height to be 600, and set the title to be AI Docs Chatbot
Fullscreen AI Chatbot Script with Customization