Widget 2.0 display settings

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.

Automatic icon

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.

Screenshot showing a website with the widget help icon hovering in the lower rightWidget using the "Bottom Right" display settings To use this configuration, select any of the Page Position options other than Attach to Element (e.g. Bottom Right, Top Center, etc.).

Widget Settings when an icon display position is selected

  1. Page Position: use this dropdown to select the display location for the icon (Bottom Right in the above screenshots).
  2. Button Text Color: sets the color of the "?" on the icon (white in the above screenshots). Use a hex color.
  3. 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:

Screenshot showing a Widget Help top navigation link will launch the widget using Attach To Element

To use this option, select Attach to Element from the Page Position dropdown.

Screenshot showing the Widget Settings with Page Position selected as Attach To Element and an Element ID of ko-launchWidget Settings when Attach To Element is selected

  1. Attach To Element is the only Page Position option which will let you attach the widget to an element of your choice.
  2. 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.
    <li><a class="hg-header-link" id="ko-launch" href="javascript:void(0);">Widget Help</a></li>