Install tinyDialog on a website with HTML

Learn how to quickly add tinyDialog to your website and gain actionable insights from customers. Set up our feedback widget with step-by-step instructions.

1. Add the tinyDialog script

Add the following script tag inside the body tag, immediately before </body>. Include it on each webpage where you want to show the widget.

<script src="https://cdn.jsdelivr.net/npm/@tinydialog/sdk-js@latest/dist/browser.js" type="module"></script>

The script tag automatically initializes all widgets that you configure in Step 3.

Use this option if your project uses a package manager such as npm, yarn, or pnpm and a JavaScript bundler. Install the script from the npm registry instead of using a script tag.

tinyDialog does not initialize your widgets automatically with this option.
❗️ You must call bindSurveysWithDataAttributes() to initialize all widgets that you configure with HTML data attributes.

Install the package with your package manager. For example, run npm install @tinydialog/sdk-js.
Import and call bindSurveysWithDataAttributes() in your code:

import {bindSurveysWithDataAttributes} from '@tinydialog/sdk-js';
bindSurveysWithDataAttributes();

For help, email [email protected].

2. Find your survey ID

Open the tinyDialog Dashboard and open the survey that you want to set up.
Open the "Setup & Connections" tab and find the unique survey ID.

The survey ID has this format: 0181b447-1234-23d1-9675-z1a295cad5d7.

a) Automatically add a floating feedback button (easiest)

tinyDialog can automatically add a feedback button to the corner of your webpage, like the one you see on the bottom-right of this page.

To enable this feature, add the data-tinydialog-floating-button attribute to the <script> tag from Step 1. Set the attribute value to the survey ID.

Add data-tinydialog-floating-button="your_survey_id" to the <script> tag:

<script 
    src="https://cdn.jsdelivr.net/npm/@tinydialog/sdk-js@latest/dist/browser.js" 
    data-tinydialog-floating-button="0181b447-1234-23d1-9675-z1a295cad5d7"
>
</script>

Change the button colors (optional)

Set the button's background and foreground colors with the data-tinydialog-floating-button-background and data-tinydialog-floating-button-foreground attributes. Use a HEX color code, such as #E2187D for pink:

<script 
    src="https://cdn.jsdelivr.net/npm/@tinydialog/sdk-js@latest/dist/browser.js" 
    data-tinydialog-floating-button="0181b447-1234-23d1-9675-z1a295cad5d7" 
    data-tinydialog-floating-button-background="#E2187D"
    data-tinydialog-floating-button-foreground="#00FF00"
>
</script>

To open the widget when a user clicks a button or link, add the data-tinydialog-openwidget attribute to that element. Set the attribute value to the survey ID.

Example:

<button data-tinydialog-openwidget="0181b447-1234-23d1-9675-z1a295cad5d7">
    Open survey when this button is clicked
</button>

Preview:

You can also add this attribute to another clickable HTML element, such as a text fragment:

<span data-tinydialog-openwidget="0181b447-1234-23d1-9675-z1a295cad5d7">
    Click this text to open the widget.
</span>

To embed the widget inside a specific HTML element, add the data-tinydialog-widgetcontainer attribute to that element.

You can style the container. For example, you can add a border or a shadow.

Example:

<div data-tinydialog-widgetcontainer="0181b447-1234-23d1-9675-z1a295cad5d7">
</div>

Preview:

Additional settings

Identify users automatically

If your project uses server-side rendering, such as PHP, and knows the user when it adds the <script> tag, set the data-tinydialog-user attribute to a user identifier. For example, use the user's email address or account ID.

tinyDialog sends this identifier with the user's response and displays it in the tinyDialog Dashboard. If you cannot set this attribute, enable the user contact information field in your survey settings. Users can then enter their information themselves.

Example:

<script 
    src="https://cdn.jsdelivr.net/npm/@tinydialog/sdk-js@latest/dist/browser.js" 
    data-tinydialog-floating-button="0181b447-1234-23d1-9675-z1a295cad5d7" 
    data-tinydialog-user="[email protected]"
>
</script>

Dashboard preview:

Install tinyDialog on a website with HTML

1. Add the tinyDialog script

2. Find your survey ID

3. Configure the widget in HTML

a) Automatically add a floating feedback button (easiest)

Change the button colors (optional)

c) Embed the widget in a container

Additional settings

Identify users automatically

On this page