Creating widgets to add to websites

Overview

Widgets allow you to embed Responsive content into internal or external websites.

Responsive supports two widget types:

• Content Library Widget – Publish curated Q&A content from your Content Library, such as FAQs or knowledge articles.

• Ask Widget – Embed Responsive Ask to let visitors search and retrieve answers from your Content Library using the filters you configure.

After creating a widget, generate the embed code and add it to your website.

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.

Before you begin

Before creating a widget:

• Ensure your Content Library contains the content you want to make available.

• Ensure Responsive AI is enabled if you plan to create an Ask widget.

• If you plan to restrict where the widget can be embedded, have the website domain names ready.

• Verify that you have permission to edit the HTML of the website where the widget will be embedded.

Creating a widget

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

2. Select the Widget Type.
   Responsive provides two widget types:

   • Content Library Widget – Displays curated Q&A content.

   • Ask Widget – Lets users search approved Content Library content using Responsive Ask.
     

     Configuring Content Library Widget

     Select Content Library Widget when you want to publish specific Q&A content on a website.

     Configure widget information

     Enter the following information:

     Field	Description
     Widget Type	Select Content Library Widget.
     Widget Name	Enter a name to identify the widget.
     Description	(Optional) Enter a description for the widget.
     Active	Enable the widget immediately after it is created. Disable it to create the widget without making it available.

     Configure published content

     1. Expand Content to be published in the Widget.

     2. Select one or more Collections.

     The section displays:

     • The number of selected collections.

     • The total number of Q&A pairs included in the widget.

     Note: You must select at least one collection before creating the widget.

     Configure metadata

     Expand Metadata to be displayed.

     Primary metadata

     Select one metadata field to display below each published question.

     Additional metadata

     Select one or more metadata fields that users can view when they expand the metadata section.

     You can:

     • Search for metadata.

     • Select individual metadata fields.

     • Select all available metadata.

     • Remove selected metadata.

     Note: Only one metadata field is displayed beneath each question. Additional metadata is available when users expand the metadata section.

     Configuring Ask Widget

     Select Ask Widget when you want website visitors to search Content Library content using Responsive Ask.

     Unlike a Content Library Widget, an Ask Widget retrieves content dynamically based on the filters you configure.

     Configure widget information

     Enter the following information:

     Field	Description
     Widget Type	Select Ask Widget.
     Widget Name	Enter a name to identify the widget.
     Description	(Optional) Enter a description for the widget.
     Active	Enable the widget immediately after it is created. Disable it to create the widget without making it available.

     Configure Ask filters

     Expand Ask Filters.

     Use filters to determine which Content Library content Responsive Ask can search.

     Collections

     Select one of the following operators:

     Operator	Description
     Any	Searches content from any of the selected collections.
     All	Searches content that belongs to all selected collections.
     Exclude	Excludes the selected collections from search results.

     Select one or more collections.

     Tags

     Select one of the following operators:

     Operator	Description
     Any	Searches content with any of the selected tags.
     All	Searches content with all selected tags.
     Not Tagged	Searches content with no tags.

     If you want to exclude content with a particular tags, specify them in the Exclude box.

     Select one or more tags.

3. Configure domain whitelist

   • Expand Additional Details.

   • Enter a website domain.

   • Click Add.

   • Repeat for additional domains.
     By default, Domain Whitelist is enabled. When enabled, the Ask Widget can be embedded only on the specified domains. Disable Domain Whitelist if you want the widget to be embedded on any website.

4. Click Create.

Generating embed code

After creating the widget:

1. Go to Organization Settings > Content Library > Widgets.

2. Locate the widget.

3. Click More Options (⋮).

4. Select Code.

Responsive generates both JavaScript and iFrame embed code.

Copy the code for the embedding method you want to use.

Embed the widget

Responsive supports embedding widgets using either JavaScript or an iFrame.

JavaScript

1. Copy the JavaScript code.

2. Add the script to your webpage.

For best results, place the JavaScript snippet immediately before the closing </body> tag.

Add the Responsive widget HTML element where you want the widget to appear.

Adjust the widget height to fit your page layout or define the height in your website's CSS.

iFrame

Alternatively, copy the iFrame code and embed it directly into the webpage where you want the widget to appear.

Display the widget as a bot

To display the widget as a floating bot instead of an embedded widget:

1. Copy the generated JavaScript code.

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

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

Managing widgets

After a widget is created, you can manage it from the Widgets page.

Activate or deactivate a widget

Use the Active toggle to control whether a widget is available.

• Enabled – The widget is available for use on websites where it is embedded.

• Disabled – The widget remains configured but is not available to visitors.

You can also activate or deactivate an existing widget from More Options (⋮) on the Widgets page.

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

Deleting a widget

To permanently remove a widget:

1. Go to Organization Settings > Content Library > Widgets.

2. Locate the widget.

3. Click More Options (⋮).

4. Select Remove Widget.

5. Confirm the deletion.

Important: Deleting a widget permanently removes it. Any websites using the deleted widget will no longer display its content.

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.