Installing tinyDialog on your Website in HTML

1. Installing the script

Either install tinyDialog onto your website via a standard html script-tag, or by using a JS package-manager like NPM.

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

You can e-mail [email protected] if you need help with setting-up tinyDialog.

2. Finding your survey Id

1. Login to the tinyDialog Dashboard
2. Go to the survey you want to set-up
3. In the "Setup & Connections" tab, you can find the unique survey Id (looks like this: 0181b447-1234-23d1-9675-z1a295cad5d7).

3. Configuring the Widget in your HTML

Automatic Floating Feedback-Button (easiest)

tinyDialog can automatically create a button in the corner of your webpage for you (like the one you are seeing on the bottom-right corner 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"
    type="module"
>
</script>

The button's background and foreground colors can be optionally 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"
    type="module"
>
</script>

Connect a 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>

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="[email protected]"
    type="module"
>
</script>

Example Dashboard View: