Installing tinyDialog on your Website in HTML

1. Installing the script

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

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

You can e-mail hello@tinyDialog.com if you need help with setting-up tinyDialog.

2. Finding your survey Id

1. Open the tinyDialog Dashboard and go to the survey you want to set-up
2. In the "Setup & Connections" tab, you can find the unique survey Id

A survey Id looks like this: 0181b447-1234-23d1-9675-z1a295cad5d7.

3. Configuring the Widget in your HTML

a) Automatic Floating Feedback-Button (easiest)

tinyDialog can automatically create a button in the corner of your webpage (like on the bottom-right of this page!).

To use this feature, you just need to add the data-tinydialog-floating-button attribute with the unique survey Id as the attribute's value to the <script> tag you created above in Step 1.

Modify the <script> tag by adding data-tinydialog-floating-button="your_survey_id":

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

Customizing Colors (optional)

The button's background and foreground colors can be customized by setting the data-tinydialog-floating-button-background and data-tinydialog-floating-button-foreground attributes to a HEX Color Code (e.g. #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>

b) Connect a custom Button with a Popup-Widget

If you want to open a floating widget when a user clicks on a specific button or link on your website, you need to add the data-tinydialog-openwidget data-attribute with your unique survey Id as it's value to the specific button or element.

Example Code:

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

Example Preview: Open Survey when this Button is Clicked

The attribute can also be added to other HTML elements besides a button, example with a clickable text fragment instead:

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

c) Widget that is embedded into a Container

If you want to load the widget as a child-element into a specific HTML element, you can use the data-tinydialog-widgetcontainer data-attribute.

You can style the parent container to add things like a border, shadow, or other further customizations.

Example Code:

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

Example Embedded Widget:

Extra Settings

Automatically Identifying Users

If you are using server-side rendering (e.g. PHP), and already know who the user is when inserting the <script> tag, you can set the script-tag's data-tinydialog-user attribute to an user-identifier like their e-mail or Account-Id.

The user-id will automatically be sent with their response, and displayed in the tinyDialog dashboard. If you cannot use this auto-tagging, you can alternatively enable the normal user contact-info input-field in your survey's settings, where the users can type their info in themselves.

Example Code:

<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="someuser@example.com"
>
</script>

Example Dashboard View: