Creating Content Library widgets to add to websites

Overview

With the widget feature, you can share your content in an internal or external website. Once a widget is created in the application, it can be embedded into an internal or external website as an iFrame, to share select content from the Answer Library. As an example, this feature can be used to share Frequently Asked Questions (FAQs) in a product web page.

Permissions

To create and manage widgets, you must have:

• Access to Organization Settings.

• The View Widgets permission to access the Widgets page.

• The Create and Update Widgets permission to create, edit, activate, deactivate, or delete widgets.

Creating Content Library widgets

1. Go to Organization Settings > Content Library > Widgets and click Create New.

2. Enter a name and description for the widget.
   

3. Expand the Content to be published in the widget section and enter the names of the Q&A collection(s) you want to display in the widget. The count of collections and the Q&A pair in the collection will be displayed.
   Note: You must select at least one collection to create the widget.

4. Expand the Metadata to be displayed section and select the metadata you want to always be displayed below the questions in the widget.
   Note: Only one piece of metadata can be displayed below the question. Other metadata is available when the question is expanded.

5. Select any additional metadata you want to be displayed by clicking the Select button associated with it.

   • You can add multiple metadata to be displayed as additional metadata.

   • You can also add all metadata by selecting the Select All icon.

6. Expand the Additional Details section and specify the domains where you want the content to be displayed.
   Note: By default, Domain Whitelist toggle is turned on and the widget can only be embedded in the domains specified here. If it is turned off, the widget can be embedded in any webpage irrespective of the domain.

7. Click Create. The widget is added to the Widgets page.

8. Hover over the widget on the list, click More Options (⋮) and select Code.
   Note: You can also view, edit, deactivate, or remove a widget by selecting the respective option from the menu. Deactivating or deleting a widget immediately prevents it from being displayed on websites where it is embedded.
   

9. The Source Code is displayed as shown below. Responsive supports embedding widgets using either JavaScript or an iFrame. Select the JavaScript or iFrame tab as needed and copy the code; you'll need it to embed the widget in your website.
   

Adding widgets to your website

1. Once you've copied either the JavaScript or iFrame tab, go to the website where you want to share the content.

2. Do the following as necessary:

   • JavaScript: Do one of the following:

     • To embed the widget, add the script to your webpage. For best results:

       1. Place the JavaScript snippet immediately before the closing </body> tag.

       2. Add the Responsive widget HTML element where you want the widget to appear.
          Note: Replace the height in the example below with your preferred size. You can also add the responsive-widget class to your CSS file and include the height and display values there, rather than inline in the HTML.
          

     • To display the widget as a floating bot:

       1. Add the following configuration to the widget definition: type: 'bot'
          

       2. Save the changes and embed the updated code into your website.

   • iFrame: Copy the iFrame code and embed it directly into the webpage where you want the widget to appear.

Managing widgets

Important: Deactivating or deleting a widget immediately prevents it from being displayed on websites where it is embedded.

Activating or deactivating widgets

1. Go to Organization Settings > Content Library > Widgets to view the Widgets page.

2. Do one of the following:

   • Hover over the widget on the list, click More Options (⋮) and select Edit, then use the Active toggle to control whether a widget is active or not.

     • When the toggle is enabled, the widget is available for use on websites where it is embedded.

     • When the toggle is disabled, the widget remains configured but is not available to visitors.

   • Hover over the widget on the list, click More Options (⋮) and select Activate or Deactivate.

Deleting widgets

To permanently remove a widget:

1. Go to Organization Settings > Content Library > Widgets to view the Widgets page.

2. Hover over the widget on the list, click More Options (⋮) and select Remove Widget.

3. Click Delete Widget to confirm the deletion.

Additional information

• Once the widget is published in the website, visitors can view the published content and search Library content from the Search field.

• Visitors can also view the metadata displayed below the question and the additional metadata by clicking the down arrow next to the Info icon.
  

• Click the Expand icon to show or hide answer text.
  

• If the widget is embedded as a bot, it will be displayed as shown below, and clicking the bot displays the library content.