@tinydialog/sdk-js: Basic Usage

If you want an easier experience, you can just add the tinyDialog script tag to your website (see the HTML Installation Guide). If you have problems, contact us via [email protected].

Install tinyDialog JavaScript library

Use the package-manager of your choice to install the library:

npm install @tinydialog/sdk-js
# or using pnpm:
pnpm add @tinydialog/sdk-js

The library offers TypeScript typings for your convenience.

Register buttons & containers that use data-attributes

By calling bindSurveysWithDataAttributes() you can hook-up buttons that have a data-tinydialog-openwidget data-attribute and containers that have a data-tinydialog-widgetcontainer data-attribute.

Code Example:

<button data-tinydialog-openwidget="0181b447-1234-23d1-9675-z1a295cad5d7">Open Feedback Widget</button>
 
<!-- the tinyDialog survey will be added as a child to the following div: -->
<div data-tinydialog-widgetcontainer="0181b447-1234-23d1-9675-z1a295cad5d7"></div>
 
<script type="module">
  import {bindSurveysWithDataAttributes} from "@tinydialog/sdk-js"
  bindSurveysWithDataAttributes();
</script>

You can use showWidget(<surveyId>) to trigger the opening of a floating tinyDialog widget from your code.

Code Example:

<script type="module">
  import {showWidget} from "@tinydialog/sdk-js"
 
  document.getElementById("open-feedback-button").addEventListener("click", () => {
    // show the widget to gather feedback from your user
    showWidget("01959b56-1bce-7d41-a68c-f19aeffc62cc");
  });
</script>

Instantiate a Survey into a specific Container

You can use loadSurvey(<surveyId>, <additionalSettings>, <targetContainer>) to load a survey as a child of an existing html element.

Code Example:

<!-- the tinyDialog survey will be added as a child to the following div: -->
<div id="widget-container"></div>
 
<script type="module">
  import {loadSurvey} from "@tinydialog/sdk-js"
 
  const widgetContainer = document.getElementById("widget-container");
  loadSurvey("01959b56-1bce-7d41-a68c-f19aeffc62cc", {}, widgetContainer);
</script>

@tinydialog/sdk-js: Basic Usage

Install tinyDialog JavaScript library

Register buttons & containers that use data-attributes

Manually Open a Widget

Instantiate a Survey into a specific Container

On this page