Skip to main content

Embedding a study on your website

Set-up a widget in your site to recruit participants.

Updated over 5 months ago

When choosing how you want to recruit, you may want to intercept participants from your website. You can do this by embedding HEARD's widget into your website. In this article we go through installation, start URL, visibility, previewing on your website, and closing or disconnecting a HEARD that already has a widget attached.
​

How the Widget Works

The HEARD widget is a small pop-up that appears on the bottom right of your website to conduct interviews with your participants. The widget will have the same learning goals, questions and settings as the interview on HEARD’s native platform. If you have chosen to automatically close the study once the interview target is met, the widget will stop showing up on your website as well once this threshold is passed.

The widget also adopts the same welcome page information, welcome messages and participant information as the native chat.

HEARD only allows researchers to install the widget on their site once. If you'd like to unlink your account's widget from your website and link a new domain, please reach out to us.​

Installation

To embed the widget in your own product you will first need to install it. When creating a study, you can install it on the recruitment tab.

  1. On the recruitment tab, click enable in the embed in product section.

  2. When you install you will need to add your domain (your website's URL).

  3. Then, copy and paste the code snippet into your site's code.

    You can typically do this by configuring the Javascript code on your website's footer. If you need any help with this step please reach out to us.
    ​

  4. Once you have saved the code on your website, click Validate Widget. If the widget is not being validated it's likely because you have not saved the code script in the right place.

Start URL

Once the widget is connected to your site, you can configure the settings. First you can determine on which page you want the widget to capture your site's visitors.
​


You may want to capture your customers on a type of page, like a blog post or a search term. If this is the case, and the URL changes based on the content queried or retrieved, it is dynamic.
​
In this example below, the widget will appear to users who land on any page after the URL path '2024'. For instance, the widget will appear if the user lands on shoppings83.blog/2024/post-2 or shoppings83.blog/2024/abc.


Visibility Percentage

The visibility percentage settings will determine how much of your traffic will see your widget. If you choose 100, every person who goes to the start URL (or URLs if dynamic) will see your widget and be asked to take a study.
​

Previewing a HEARD On Your Website

Once you have attached a widget to your study, you will be able to preview it on HEARD's platform, as well as on your website.

To do so, first press the preview button on the top right-hand side when creating a HEARD. A window will ask where you want to preview the interview, and you can choose to do so on your website.

When you're in demo mode, you will see a banner on the top of your widget, and none of your data will be collected.

Running a Second HEARD with a Widget

HEARD only allows customers to embed one study into their site at a time. If you want to run a second study on your website, even if on another page, you need to close or disconnect the widget from the original study. Here's how to do so:

  1. Create a study and add all your details, learning goals, settings and questions. On the recruitment tab click enable in the "Embed in Product" section.
    ​

  2. If another study is already running on your website, a window will direct you to close the study currently on your website. Click on the link to that study.
    ​


    ​

  3. Once you are in the original study, either close the study or disconnect the study from the widget.
    ​
    a) To close, choose close study from the settings menu in the top right-hand corner of the study.
    ​


    b) To disconnect HEARD from the study, click, edit instead from this same settings menu.
    ​


    Once you are back into the recruitment tab, you can press Disable in the embed in product section. This means your HEARD will continue to collect responses from users who receive the link to HEARD's platform, but the widget will no longer be connected to this study.
    ​

  4. Once you have disconnected the widget from the original study, you can open up the new study and enable the settings so that it lives on a page on your website.

Did this answer your question?