Integrate the Chimebox Feedback Widget

Watch: How to Integrate Chimebox Feedback Widget

How to Add the Chimebox Feedback Widget to Your Website

Follow these steps to integrate our feedback widget, ideal for static and portfolio websites.

Step 1: Add the JavaScript Plugin

Place this script into the HTML file where you’d like the feedback section to appear:

<script src="https://chimebox.me/comment-widget.js"></script>

For React apps, add this inside the body of index.html or install our React component as described below.

Step 2: Create a Placeholder for the Feedback Section

Insert the following div where you want the feedback form to appear:

<div id="comment-section"></div>

Step 3: Initialize the Widget

After adding the script and placeholder, initialize the widget:

<script>
  window.initCommentSection({
    siteId: 'your-generated-word-phrase',
    turnstileDataSiteKey: 'your-cloudflare-turnstile-key'
  });
</script>

Replace 'your-generated-word-phrase' and 'your-cloudflare-turnstile-key' with actual values from the Get Credentials page.

Step 4: Configure Cloudflare Turnstile (Optional)

To enhance security, configure Cloudflare Turnstile for the feedback form:

  1. Go to your Cloudflare Dashboard and navigate to the Turnstile settings.
  2. Create a new site key for your domain.
  3. Copy the generated Turnstile data-sitekey and add it to the turnstileDataSiteKey field in the initialization script above.

Ensure that Turnstile is enabled to protect against spam and bot feedback submissions.

Step 5: Test the Integration

After setup, open your website and submit feedback. The data should be securely stored in your dashboard.

Step 6: Customize the Style (Optional)

Adjust CSS in your stylesheet to customize the feedback form’s appearance.

For React Projects:

Install our React package:

npm install react-chimebox

Once installed, integrate it directly into your React components.