To navigate forward and backward, click on the arrow-buttons ← and → on the bottom or on your keyboard. Alternatively, click on the purple circles to go to the next step.
A widget is a compact program that can be embedded on websites, web applications, or HelpSpace Docs pages. It allows users to easily contact you through a form or access a knowledge base.
Flexible Placement: Widgets can be integrated into your website, web apps, or HelpSpace Docs pages, ensuring that your knowledge base and contact form are readily available where your users need them most.
Customization Options: Customize colors, logos, text, and language to match your needs. The widget can appear as a small bubble in the corner of the screen and open as a modal dialog when clicked, providing seamless access to content.
Create Widget
Go to Settings → Widgets and click on Create Widget.
Enter the data:
Fields / Functions | Description |
|---|---|
Name | Name of the widget. |
Description | Internal description of the widget. |
Channel | Select the channel you want to connect with the widget. |
Click Create to generate the widget. The preview will appear in the bottom right corner.
Configure Widget
Widget Settings
Fields / Functions | Description |
|---|---|
Widget Name | Name of the widget. |
Description | Internal description. |
Channel | Select the channel you want to connect with the widget. |
Searchable Docs | Select the searchable Docs site. |
Show latest article on main screen | Displays the latest article from a specific Docs site/category, ideal for news or updates. |
Hide Docs | Show/hide Docs within the widget. |
Hide Contact | Show/hide the contact form within the widget. |
Widget Style
Fields / Functions | Description |
|---|---|
Header | |
Background | Background color of the header. |
Text | Header text color. |
Icons | Icon color. |
Logo | Select the top logo. |
Widget Bubble | |
Background | Background color of the widget bubble. |
Icon | Select the icon for the bubble. |
Section Icons | |
Docs Icon | Select the icon for the docs. |
Contact Icon | Select the icon for the contact. |
Content | |
Button Background | Background color of the content. |
Button Text | Content text color. |
Background | Background color in the lower widget area. |
Primary | Primary text color (e.g., headers). |
Card Background | Background color of boxes. |
Card Text | Text color of boxes. |
Section Title | Title color for sections (e.g., contact). |
Section Subtitle | Subtitle color for sections (e.g., contact). |
Search Background | Background color of the search field (in Docs). |
Search Text | Text color in the search field (in Docs). |
Search Result Text | Text color for results (in Docs). |
Input Background | Background color of input fields (in contact). |
Input Text | Text color of input fields (in contact). |
Localization
Setting the Widget Language
By default, the widget is set to English, but it can automatically detect and adjust its language based on the user's browser settings if configured.
Automatic Language Detection: HelpSpace checks the browser settings and selects the appropriate language. If the detected language is not supported in your workspace, the widget defaults to English.
Adding More Languages:
Go to the Translation section and add the desired languages.
Translation Status: Fully translated languages show (translated) while partially translated languages show (partially translated).
Embed Options
Copy the Code Snippet:
Select and copy the provided code snippet.Paste the Code:
Insert the copied code into the<head>...</head>section of your website's HTML.
The widget has many configuration options that you can insert the script. Please check our technical documentation for more details:
https://documentation.helpspace.com/api-widget-javascript
Delete Widget
Check the bottom-line and click on the button Delete Widget to delete the widget permanently.
How to integrate the widget to my Docs-site
https://supportcenter.helpspace.com/article/216/how-to-add-a-widget-to-my-self-service-site
