To get started with the web widget, go to Settings > Widget.
First, you'll need to decide how you want your website users to access the widget. We offer two options:
- An automatic circular "?" icon
- Attach the widget to an element of your choice (such as a menu option, top navigation link, hyperlink, icon, image, etc.) by element ID
See the next two sections for info on getting each option set up.
With the automatic icon option, you don't really need to adjust anything else on the website you're adding the code to. The script will automatically create the icon and place it based on the location setting you select. If you want to move the icon, you simply select a different display location from the dropdown.
To use this configuration, select any of the Page Position options other than Attach to Element (e.g. Bottom Right, Top Center, etc.).
- Page Position: use this dropdown to select the display location for the icon (Bottom Right in the above screenshots).
- Button Text Color: sets the color of the "?" on the icon (white in the above screenshots). Use a hex color.
- Button Background Color: sets the color of the icon button (orange in the above screenshots). Use a hex color.
Attach to element
Rather than having us automatically create an icon, you can launch the widget by attaching it to an element of your choice--this can be a menu option, an icon, a hyperlink, etc.
For example, in this screenshot, the "Widget Help" link in the upper right will open the widget:
To use this option, select Attach to Element from the Page Position dropdown.
- Attach To Element is the only Page Position option which will let you attach the widget to an element of your choice.
- Once Attach To Element is selected, you'll see an Element ID field. Set this to the html ID attribute of the element you want the widget attached to in your website. When someone clicks on this element, the widget will open. If your developers are creating an element from scratch, we recommend using ko-launch or another obviously KnowledgeOwl-related element ID.
For example, if we used "ko-launch" as our Element ID, we might add this HTML element to a top navigation option in our other website.