A dynamically-injected feedback widget for the Channel Dynamics websites.
In order to embed the feedback widget on a website, the following steps are required:
- Include the widget script in the website's HTML, preferably at the bottom of the page
For versioned releases, replace <version>
with the version number of the release. For example, 1.0.0
.
</body>
<script src="https://cd-feedback.pages.dev/<version>/index.js"></script>
</html>
For the latest version, remove the <version>
from the URL.
</body>
<script src="https://cd-feedback.pages.dev/index.js"></script>
</html>
- Inside the body of the HTML, include the following HTML snippet.
It doesn't matter where it is placed, as the widget will be placed on the page in the bottom right corner.
<div id="cd-feedback-widget"></div>
The widget is hosted on Cloudflare's CDN, and is served from the cd-feedback.pages.dev
domain.
The feedback URL for the API can be set by adding a data-feedback-url
property
to the div element that the widget is placed in. For example:
<div id="cd-feedback-widget" data-feedback-url="https://example.com/feedback"></div>
The default value for the feedback URL is
https://92d7caucvd.execute-api.us-east-1.amazonaws.com/default/feedback-api
.
The feedback prompt (the placeholder in the text field) can be customized by
adding a data-feedback-prompt-text
property to the div element that the widget is placed in. For example:
<div id="cd-feedback-widget" data-feedback-prompt-text="How can we improve?"></div>
The default value for the feedback prompt is Enter your feedback here...
.
The feedback prompt help text (the text that appears above the text field) can be customized by
adding a data-feedback-prompt-help-text
property to the div element that the widget is placed in. For example:
<div id="cd-feedback-widget" data-feedback-prompt-help-text="We appreciate your feedback!"></div>
The default is an empty string, meaning no help text will be displayed.