Save as PDF

Creating 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

You must have access to Organization settings and the View Widgets permission to access the Widget set up screen. Only users with the Create and Update Widgets permission can create, edit, or delete widgets.

Select the applicable tab for your edition of Responsive.

  • Creating widgets

    1. Go to Organization Settings > Content Library > Widgets and click Create New.
    2. Enter a name for the widget, a description, and the names of the Q&A collection(s) you want to display in the widget.
      Note: You must select at least one collection to create the widget.

      The count of collections and the Q&A pair in the collection will be displayed as shown below:
    3. From the Metadata to be displayed drop-down list, 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.
    4. Select any additional metadata you want to be displayed by clicking the Select mceclip3.pngbutton associated with it.
      • You can add multiple metadata to be displayed as additional metadata.
      • You can also add all metadata by selecting Select All icon.
    5. In Additional Details, specify the domains in which the content has to be displayed.
      Note: By default, Domain Whitelist toggle will be 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. 
    6. Click Create. The widget will be displayed in the Widgets page as shown below:
    7. Click the More Options icon and select Code.
      Note: You can also view, edit, deactivate, or delete a widget by selecting the respective option from the More Options drop-down list. If deactivated or deleted, the content will not be displayed in the whitelisted website.

      The Source Code will be displayed as shown below. You can embed the code in the required website to display the content within an iFrame.

    Adding the widget to your website

    1. Click Copy Code from either the JavaScript or iFrame tab. This code can be embedded in the website where you want to share the content.
      Note: As a best practice, add the JavaScript snippet above the closing body tag on the webpage where you want the widget contents to display.
    2. Add the following HTML where you want the widget to appear on your webpage:
      widget_code.png
      • The height value is an example. Set the height to 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 view the widget as a Bot in the website, copy the JavaScript code and enter- type:'bot' to the code as shown in the sample below:

    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 mceclip10.png icon.
    • Click the Expand mceclip7.png icon to show or hide answer text.
    • If the widget is embedded as a bot, it will be displayed as shown below:
      mceclip2.png
    • Clicking on the bot will display the Library content as shown below:
      mceclip1.png

  • Essentials features are subscription-based and may not be available for all users. Contact your account manager, or accountmanagers@responsive.io, for more details.

    Creating widgets

    1. Go to Organization Settings > Content Library > Widgets and click Create New.
    2. Enter a name for the widget, a description, and the names of the Q&A collection(s) you want to display in the widget.
      Note: You must select at least one collection to create the widget.

      The count of collections and the Q&A pair in the collection will be displayed as shown below:
    3. From the Metadata to be displayed drop-down list, 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.
    4. Select any additional metadata you want to be displayed by clicking the Select mceclip3.pngbutton associated with it.
      • You can add multiple metadata to be displayed as additional metadata.
      • You can also add all metadata by selecting Select All icon.
    5. In Additional Details, specify the domains in which the content has to be displayed.
      Note: By default, Domain Whitelist toggle will be 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. 
    6. Click Create. The widget will be displayed in the Widgets page as shown below:
    7. Click the More Options icon and select Code.
      Note: You can also view, edit, deactivate, or delete a widget by selecting the respective option from the More Options drop-down list. If deactivated or deleted, the content will not be displayed in the whitelisted website.

      The Source Code will be displayed as shown below. You can embed the code in the required website to display the content within an iFrame.


      Adding the widget to your website

      1. Click Copy Code from either the JavaScript or iFrame tab. This code can be embedded in the website where you want to share the content.
        Note: As a best practice, add the JavaScript snippet above the closing body tag on the webpage where you want the widget contents to display.
      2. Add the following HTML where you want the widget to appear on your webpage:
        widget_code.png
        • The height value is an example. Set the height to 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 view the widget as a Bot in the website, copy the JavaScript code and enter- type:'bot' to the code as shown in the sample below:

      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 mceclip10.png icon.
      • Click the Expand mceclip7.png icon to show or hide answer text.
      • If the widget is embedded as a bot, it will be displayed as shown below:
        mceclip2.png
      • Clicking on the bot will display the Library content as shown below:
        mceclip1.png

Was this article helpful?

/