Embedding the ChangeDog Widget: A Step-by-Step Guide

What Is the ChangeDog Widget?

The ChangeDog widget is a lightweight (~5KB) JavaScript component that you can embed on any website. It provides users with:

• A changelog timeline showing your latest updates
• A feedback form for submitting bug reports and feature requests
• Upvoting/downvoting capabilities on existing feedback

The widget is fully responsive and supports both dark and light modes (auto-detected based on the user's system preferences).

Step 1: Get Your Project ID

First, log into your ChangeDog dashboard and navigate to your project settings. You'll find your unique Project ID listed there. It looks something like this:

Project ID: 507f1f77bcf86cd799439011

Step 2: Add the Widget Script

Copy the following code snippet and paste it just before the closing </body> tag in your HTML:

<script src="https://changedog.top/widget.js"
        data-project="YOUR_PROJECT_ID"
        data-theme="auto"
        data-position="bottom-right">
</script>

Replace YOUR_PROJECT_ID with your actual Project ID.

Step 3: Customize the Widget

The widget supports several customization options via data attributes:

• data-theme: Set to auto, light, or dark
• data-position: Set to bottom-right, bottom-left, top-right, or top-left
• data-show-badge: Set to true or false to show/hide the "Powered by ChangeDog" badge (Solo plan and above can hide it)

<script src="https://changedog.top/widget.js"
        data-project="YOUR_PROJECT_ID"
        data-theme="dark"
        data-position="bottom-left"
        data-show-badge="false">
</script>

Step 4: Test the Widget

After adding the script, refresh your website. You should see a small pill button in the corner of your screen (default: bottom-right). Click it to open the widget modal and verify that:

• Your changelog entries are displayed correctly
• The feedback form is functional
• The theme matches your website

Step 5: Monitor Widget Usage

ChangeDog automatically tracks widget views and displays the usage in your dashboard. You'll see a quota meter that shows how many views you've used this month. When you reach 80% of your quota, a warning banner appears with an upgrade prompt.

Advanced Configuration

For more advanced use cases, you can programmatically control the widget using JavaScript:

// Open the widget
window.ChangeDog.open();

// Close the widget
window.ChangeDog.close();

// Navigate to a specific tab
window.ChangeDog.openTab('feedback');

Need Help?

If you run into issues embedding the widget, check out our Knowledge Base or reach out via the in-app chat. We're here to help!