Dropthought Web Widget

You can collect feedback from within your website or web application by triggering a set of questions to be displayed for your customers when they interact with any button or on the loading of a page inside your website or web application.

This article will help you understand:

1. What are the benefits of using a web widget?

2. What are the prerequisites?

3. How do you get started with setting up a web widget?

4. What are the APIs to use and their respective properties?

Benefits of using the Web Widget

1. Capture your customers' thoughts from your website or web application, hence getting insights about their most organic feelings.

2. Collect information about the person who gives feedback while maintaining a sense of security for the customer.

3. Customize the look and feel of how your questions appear to the customer. This is because we maintain the code for each widget as a standalone entity that does not have to depend on the standard look and feel of Dropthought’s surveys.
   

Getting Started

Note: Only one Dropthought program can be mapped to the widget at a time.

You can map a program to a widget in simple four steps:

1. Publish a program on Dropthought.
   

2. Reach out to our Customer Success team if you want to collect feedback on your website/web application.
   Our team will share some templates that you can choose from. If you want something completely different from what we have, explain the details to our CS team, and we will build it just for you.
   Our only goal is to make sure you get what you want 🙂
   

3. Upon finalizing the design, we do all the heavy lifting for you.
   We will create the interface where the questions appear and set up the required API connections, ensuring the collected feedback is sent to the correct program inside your Dropthought account.
   

4. Once the widget is ready to be embedded in your code, we will upload it on AWS S3 and give you a URL. The URL can be modified based on whether you want to capture any information about the customer who leaves feedback.
   The URL will look something like https://dt-webwidget.s3.amazonaws.com/IVMS/IVMS-Feedback.html
   

5. You can now insert that URL within your code so that it can be triggered at the click of a button or on loading a page of your website/web application.

Note: If you want to host the web widget on your own servers, let our CS team know.
We will then share an encrypted folder with you with all the necessary images and code files to display the questions. You can then upload it to your server.
A developer from Dropthought can also help you through the process if required.

If you want to build the web widget & send feedback to your Dropthought account

Note: This process will require more technical handling from your end, and hence, we recommend you ask our Customer Success team to connect you with a Dropthought developer before you get started.

You can map a program to a widget in four steps:

1. Publish a program on Dropthought.

2. Create your web widget.
   You can use our sample widget folder (shared on request) to customize the look and feel of how the questions appear.

3. Ensure to include questions that can be mapped to the questions you added in the program inside your Dropthought application.

4. Use Events API to map the corresponding program and questions using the unique IDs. Refer to the following section for the same.

API to use (Events API)

POST https://api.dropthought.com/dtapp/api/event

Data Objects and Properties

"source": "api"
"Country": "India",
"Zone": "South Zone",
"Region": "South Chennai",
"Sales Area": "kancheepuram",
"RO ID": "10004785",
"Dealer Name": "Millennium Gas Station",
"Dealer Mobile Number": "976565445",
"Cashier ID": "100567",
"Cashier Name": "Sumeesh Babu",
"Transaction ID": "INV23-009898",
"Date": "25-06-2023",
"Time": "11:56:37",
"DU ID": "1",
"Pump ID": "2",
"Nozzle ID": "3",
"Mobile Number": "7503600500",
"Type": "Local Account",
"MOP Info": "UPI",
"Product Details" = "{HSD, 2L}, {Lays 400G, 1PCS}, {Aquafina 1.0L,
1BTL}"

"token":
"qsnt1e08v7rfujfdle0rgj2hh8~~YzNiMTk5YWItMzY3MS00MGRjLWI1ZjktOTEwMjg3YTU0M
mQy"

Note

1. Customer Name is added to the question to track the response origin, i.e., Global Respondents in Dropthought.

2. For the rest of the survey questions, Do pass dataValue as "0" if the user selects "Highly Dissatisfied" and dataValue as "1" if the user selects "Dissatisfied" and so on.

3. The "token": and "dataId": specifies the survey. In the above payload: “Fuel Station Experience” and hence do not change them.

4. To capture additional metadata, please add them within "metaData":

Sample Payload

{
"data": [{
"dataId": "01c78866-36af-43ec-bebc-0fc530091051",
"dataValue": ["Sudhakar"],
"dataType": "open"
}, {
"dataId": "04dd0b8d-37ff-4ed8-ba41-a6d3eef9f9c5",
"dataValue": [3],
"dataType": "rating"
}, {
"dataId": "4a5f7b14-5f37-4a6a-8e65-417e48294773",
"dataValue": [8],
"dataType": "rating"
}, {
"dataId": "6981b6f3-1e01-4381-9654-70c98f97a640",
"dataValue": [1, 2, 3, "Gr8"],
"otherFlag": true,
"dataType": "multiChoice"
}],
"metaData": {
"source": "api"
"Country": "India",
"Zone": "South Zone",
"Region": "South Chennai",
"Sales Area": "kancheepuram",
"RO ID": "10004785",
"Dealer Name": "Millennium Gas Station",
"Dealer Mobile Number": "976565445",
"Cashier ID": "100567",
"Cashier Name": "Sumeesh Babu",
"Transaction ID": "INV23-009898",
"Date": "25-06-2023",
"Time": "11:56:37",
"DU ID": "1",
"Pump ID": "2",
"Nozzle ID": "3",
"Mobile Number": "7503600500",
"Type": "Local Account",
"MOP Info": "UPI",
"Product Details" = "{HSD, 2L}, {Lays 400G, 1PCS}, {Aquafina 1.0L,
1BTL}",
},
"refId": "",
"token":
"qsnt1e08v7rfujfdle0rgj2hh8~~YzNiMTk5YWItMzY3MS00MGRjLWI1ZjktOTEwMjg3YTU0M
mQy",
"language": "en"
}