Installing tinyDialog on your Website in 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. Installing the script
Copy the following snippet into your website's code inside the body tag, above </body>.
It has to be included on every webpage where you want to use our 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 you will configure in step 2.
If you prefer using a package manager like npm/yarn/pnpm with a JS-bundler, you can install our script via the NPM registry instead of using the script-tag.
However, if you do that, tinyDialog cannot auto-initialize your widgets.
❗️ You must manually call bindSurveysWithDataAttributes() to auto-initialize all widgets you have configured with data-attributes.
-
Install the package with the package manager of your choice by executing
npm install @tinydialog/sdk-jsor equivalent. -
Import and execute
bindSurveysWithDataAttributes()in your code to wire-up all html-configured widgets:
import {bindSurveysWithDataAttributes} from '@tinydialog/sdk-js';
bindSurveysWithDataAttributes();You can e-mail [email protected] if you need help with setting-up tinyDialog.
2. Finding your survey Id
- Open the tinyDialog Dashboard and go to the survey you want to set-up
- 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:
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="[email protected]"
>
</script>Example Dashboard View:
Last updated on
tinyDialog Documentation
Learn how to quickly set-up tinyDialog on your website and gain actionable feedback from your customers. Connectable with 3rd party services like Zapier or Airtable.
Notion Page
Learn how to add the tinyDialog feedback widget to your Notion page. Embed tinyDialog into Notion and receive responses from users.