![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)
Embedded Documentation
Your documentation can be embedded to allow your users to view it from within your product. When triggered by your end user, the Embedded Documentation appears as a drawer that is the full height of their screen. This trigger action, along with the style of the drawer, can be customized to your liking.
Installation Code
Insert the script below into the head of your product's index.html file.
Embedded Documentation 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 to attach your embedded docs to; can be found in your Site Settings | string |
| Key(s) to press to trigger embedded docs | TKeyCombo |
| The URL of the page that will be displayed if no page URL is passed | Empty |
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 Embedded Documentation 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 |
|
|
| The color of the arrow icon on the button in the bottom left of the docs drawer |
|
|
| The background color the button in the bottom left of the docs drawer |
|
|
| The color of the text on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the icon on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the background on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The text of the "AI Assistant" button in the bottom right of the docs drawer |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your docs from your code.
Open Docs
The open-docs event function can be invoked to make your docs appear. This function takes the URL of the page to display as a parameter.
For example, this function can be called when clicking an icon or button to trigger your documentation to open on a specific page.
file.tsx
Update Docs
The update-docs event function can be invoked to restyle the embedded docs programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the embedded docs for light-mode or dark-mode programmatically or to customize the title of the AI Assistant button.
file.tsx
Full Example
In the example below, we mount the docs component to our site 663bce9d7c83fec5f654479a, set the docs to default open at https://docs.umbriadocs.com/, configure it to be opened with the hotkey ctrl + alt + 2, set the width to be 600, and set the icon of the exit button to be #4285F4.
Fullscreen AI Chatbot Script with Customization
Embedded Documentation
Your documentation can be embedded to allow your users to view it from within your product. When triggered by your end user, the Embedded Documentation appears as a drawer that is the full height of their screen. This trigger action, along with the style of the drawer, can be customized to your liking.
Installation Code
Insert the script below into the head of your product's index.html file.
Embedded Documentation 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 to attach your embedded docs to; can be found in your Site Settings | string |
| Key(s) to press to trigger embedded docs | TKeyCombo |
| The URL of the page that will be displayed if no page URL is passed | Empty |
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 Embedded Documentation 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 |
|
|
| The color of the arrow icon on the button in the bottom left of the docs drawer |
|
|
| The background color the button in the bottom left of the docs drawer |
|
|
| The color of the text on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the icon on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the background on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The text of the "AI Assistant" button in the bottom right of the docs drawer |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your docs from your code.
Open Docs
The open-docs event function can be invoked to make your docs appear. This function takes the URL of the page to display as a parameter.
For example, this function can be called when clicking an icon or button to trigger your documentation to open on a specific page.
file.tsx
Update Docs
The update-docs event function can be invoked to restyle the embedded docs programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the embedded docs for light-mode or dark-mode programmatically or to customize the title of the AI Assistant button.
file.tsx
Full Example
In the example below, we mount the docs component to our site 663bce9d7c83fec5f654479a, set the docs to default open at https://docs.umbriadocs.com/, configure it to be opened with the hotkey ctrl + alt + 2, set the width to be 600, and set the icon of the exit button to be #4285F4.
Fullscreen AI Chatbot Script with Customization
Embedded Documentation
Your documentation can be embedded to allow your users to view it from within your product. When triggered by your end user, the Embedded Documentation appears as a drawer that is the full height of their screen. This trigger action, along with the style of the drawer, can be customized to your liking.
Installation Code
Insert the script below into the head of your product's index.html file.
Embedded Documentation 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 to attach your embedded docs to; can be found in your Site Settings | string |
| Key(s) to press to trigger embedded docs | TKeyCombo |
| The URL of the page that will be displayed if no page URL is passed | Empty |
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 Embedded Documentation 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 |
|
|
| The color of the arrow icon on the button in the bottom left of the docs drawer |
|
|
| The background color the button in the bottom left of the docs drawer |
|
|
| The color of the text on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the icon on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The color of the background on the "AI Assistant" button in the bottom right of the docs drawer |
|
|
| The text of the "AI Assistant" button in the bottom right of the docs drawer |
|
|
Event Functions
You can use Event Functions to trigger restyle or control your docs from your code.
Open Docs
The open-docs event function can be invoked to make your docs appear. This function takes the URL of the page to display as a parameter.
For example, this function can be called when clicking an icon or button to trigger your documentation to open on a specific page.
file.tsx
Update Docs
The update-docs event function can be invoked to restyle the embedded docs programmatically. This event function takes any subset of the style parameters above.
For example, this function can be called to restyle the embedded docs for light-mode or dark-mode programmatically or to customize the title of the AI Assistant button.
file.tsx
Full Example
In the example below, we mount the docs component to our site 663bce9d7c83fec5f654479a, set the docs to default open at https://docs.umbriadocs.com/, configure it to be opened with the hotkey ctrl + alt + 2, set the width to be 600, and set the icon of the exit button to be #4285F4.
Fullscreen AI Chatbot Script with Customization