Klick auf die Pfeiltasten ← und → am unteren Rand oder auf der Tastatur, um vor und rückwärts zu navigieren. Alternativ kannst du auch auf die lila Kreise klicken, um zum nächsten Schritt zu gelangen.
Ein Widget ist ein kompaktes Programm, das auf Websites, Webanwendungen oder HelpSpace-Docs-Seiten eingebettet werden kann. Es ermöglicht Nutzern eine einfache Kontaktaufnahme über ein Formular oder bietet Zugriff auf eine Wissensdatenbank.
An vielen Stellen integrieren: Widgets können auf deiner Website, innerhalb einer Web-Apps oder auf der HelpSpace Docs-Seiten eingefügt werden, sodass die Wissensdatenbank und Kontaktformular genau dort verfügbar sind, wo deine Nutzer sie benötigen.
Darstellungsmöglichkeiten: Farben, Logo, Text und Text können individualisiert und in die Sprache übersetzt werden, die benötigt wird. Dabei kann das Widget als kleine Blase in der Fensterecke und per Klick in einem modalen Dialog geöffnet werden, um auf die Inhalte zuzugreifen.
Widget erstellen
Gehe zu Einstellungen → Widgets und klicke auf Widget erstellen.
Gebe die Daten an
Felder / Funktionen | Beschreibung |
|---|---|
Name | Name des Widgets. |
Beschreibung | Interne Beschreibung des Widgets. |
Channel | Wähle den Channel, den du mit dem Widget verbinden möchtest. |
Klicke auf Anlegen, um das Widget zu erstellen. Die Vorschau erscheint unten rechts.
Widget konfigurieren
Widget Einstellungen
Felder / Funktionen | Beschreibung |
|---|---|
Widget Name | Name des Widgets. |
Beschreibung | Interne Beschreibung. |
Channel | Wähle den Channel, den du mit dem Widget verbinden möchtest. |
Durchsuchbare Docs | Wähle die durchsuchbare Docs-Seite. |
Aktuellsten Artikel in Widget-Übersicht anzeigen | Zeigt den neuesten Artikel einer bestimmten Docs-Seite/Kategorie an, ideal für News oder Updates. |
Docs ausblenden | Zeigt/versteckt Docs im Widget. |
Kontakt ausblenden | Zeigt/versteckt den Kontakt im Widget. |
Widget Stil
Felder / Funktionen | Beschreibung |
|---|---|
Header | |
Hintergrund | Hintergrundfarbe des Headers. |
Text | Textfarbe des Headers. |
Icons | Farbe der Icons. |
Logo | Wähle das obere Logo (max. Höhe: 16 px). |
Widget-Bubble | |
Hintergrund | Hintergrundfarbe der Widget-Blase. |
Icon | Wähle das Icon für die Blase aus |
Sektions-Icons | |
Docs-Icon | Wähle das Icon für die Blase aus |
Kontakt-Icon | Wähle das Icon für das Kontaktformular aus |
Inhalt | |
Button-Hintergrund | Hintergrundfarbe des Inhalts. |
Button-Text | Textfarbe des Inhalts. |
Hintergrund | Hintergrundfarbe im unteren Widget Bereich |
Primäre | Primäre Textfarbe (Überschrift) |
Karten-Hintergrund | Hintergrundfarbe der Boxen |
Karten Text | Textfarbe der Boxen |
Abschnitt Titel | Titelfarbe für den Abschnitt (z. B. Kontakt) |
Abschnitt Untertitel | Untertitelfarbe für den Abschnitt (z. B. Kontakt) |
Hintergrund suchen | Hintergrundfarbe im Suchfeld (in Docs) |
Text suchen | Textfarbe im Suchfeld (in Docs) |
Ergebnis Text | Textfarbe Ergebnisse (in Docs) |
Input Hintergrund | Hintergrundfarbe Eingabefeld (in Kontakt) |
Input Text | Textfarbe Eingabefeld (in Kontakt) |
Lokalisierung
Widget-Sprache einstellen
Das Widget ist standardmäßig auf Englisch eingestellt, kann jedoch die Sprache automatisch anhand der Browsereinstellungen des Nutzers erkennen, wenn diese konfiguriert ist.
Automatische Spracherkennung:
HelpSpace prüft die Browsereinstellungen und wählt die passende Sprache. Ist diese in deinem Workspace nicht verfügbar, wird das Widget auf Englisch eingestellt.Weitere Sprachen hinzufügen:
Gehe zum Abschnitt Übersetzung und füge gewünschte Sprachen hinzu.
Übersetzte den Text in die Zielsprache
Vollständig übersetzte Sprachen zeigen (translated), teilweise übersetzte Sprachen (partially translated).
Embed Optionen
Code-Snippet kopieren:
Wähle und kopiere das bereitgestellte Code-Snippet.Code einfügen:
Füge das kopierte Snippet in den<head>...</head>-Bereich deiner Website ein.
Das Widget bietet viele Konfigurationsmöglichkeiten. Weitere Details findest du in unserer technischen Dokumentation.
Widget löschen
Klicke auf Widget löschen am unteren Rand, um das Widget dauerhaft zu entfernen.
Integration des Widgets auf einer Docs-Seite
Für detaillierte Anweisungen siehe hier.
Widget
A widget is a compact program designed to be integrated into websites, web applications, or HelpSpace Docs sites. Its primary purpose is to provide users with a straightforward means to contact you, either through a contact form or by accessing a knowledge database.
Flexible Integration:
Versatile Placement: Widgets can be deployed on your central website, within your web app, or on Docs sites to ensure the knowledge base is accessible right where your users need it.
Access Methods: Users can interact with the content through a clickable widget bubble or a modal that appears when they click on a link.
Create Widget
Go to Settings → Widgets and click on the button Create Widget
Fields / Functions | Description |
|---|---|
Name | Name of the widget |
Description | An internal description of the widget |
Channel | Select the channel that you want to connect with the widget. |
Click on the button Create to build the widget. You see the Widget preview in the lower-right corner.
With the bubble icon, you toggle the dialog (show/hide).
Configure Widget
Widget Settings
Fields / Functions | Description |
|---|---|
Widget Name | Name of the widget |
Description | An internal description of the widget |
Channel | Select the channel that you want to connect with the widget. |
Searchable Docs Site | Select the Docs site that can be searchable. |
Show latest article on main screen | Displays the latest article from a certain Docs site and category. Perfect to show the latest news or updates. |
Hide Docs | Show/Hide the Docs in the Widget |
Hide Contact | Show/Hide the Contact in the Widget |
Widget Style
Fields / Functions | Description |
|---|---|
Header | If you mouse over the square, then the section in the widget dialog is framed in red. The dialog has to be displayed. |
Background | Header background-color |
Text | Header text color |
Icons | Icon color |
Logo | Select the logo on the top. The max height is 16 px. |
Widget Bubble | If you mouse over the square, then the widget bubble is framed in red. |
Background | Widget bubble background-color |
Content | If you mouse over the square, then the section in the widget dialog is framed in red. The dialog has to be displayed. |
Button Background | Content background-color |
Button Text | Content text color |
Localization
Setting the Widget Language
By default, the widget is set to English. However, you can configure the widget to automatically detect the language based on the user's browser settings.
1. Automatic Language Detection:
HelpSpace will check the browser's localization settings to determine the appropriate language.
If the detected language is not supported in your HelpSpace workspace, the widget will default to English.
2. Adding Additional Languages:
To support more languages, navigate to the “Translation” section (details provided below) and add the desired languages to your widget.
Translation
Adding a New Language
1. Select the Language:
Choose the language you wish to add from the list provided.
2. Understanding Translation Status:
Languages that are fully translated will display the label “<------- (translated)” to the right of the language name.
Languages that are partially translated will show “<------- (partially translated)” beside their names.
Embed Options
1. Copy the Code Snippet:
Select and copy the provided code snippet.
2. Paste the Code:
Insert the copied code into the
<head>...</head>section of your website's HTML.
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
Technical Documentation
The widget has many configuration options that you can insert the script. Please check our technical documentation for more details.
