Basic Usage (@tinydialog/sdk-js)
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-jsThe 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>Manually Open a Widget
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>Last updated on