Embeddable Widget
Learn how to embed and configure the floating changelog widget on your website.
Embeddable Widget
Add a beautiful, floating changelog widget to your website with just one line of code.
On This Page
Quick Start
1. Get Your Embed Code
Navigate to your organization dashboard and click on "Embeddable Widget" in the Quick Actions sidebar.
Dashboard → Your Organization → Embeddable Widget
2. Add the Script to Your Website
Copy the embed code and paste it into your website's HTML, just before the closing </body> tag.
<script
src="https://www.changelogy.com/changelog-widget.js"
data-changelog-org="your-company"
data-position="bottom-right"
data-primary-color="#6366f1"
data-button-text="What's New"
></script>
3. That's It!
The widget will automatically appear on your website. Users can click the button to see your latest updates.
Configuration Options
data-changelog-org
Required
Your organization slug — the unique identifier used in the URL.
data-changelog-org="acme-corp"
data-position
Optional — default: bottom-right
Position of the widget button on the screen.
Accepted values:
bottom-rightbottom-lefttop-righttop-left
data-position="bottom-left"
data-primary-color
Optional — default: #6366f1
Primary color for the widget button. Must be a valid hex code.
data-primary-color="#FF6B6B"
data-button-text
Optional — default: What's New
Text displayed on the widget button.
data-button-text="Latest Updates"
Customization
Dashboard Settings
You can customize additional widget settings from your organization dashboard:
- Enable or disable the widget globally
- Set default position and colors
- Customize button text
- Preview changes in real-time
Branding
The widget automatically uses your organization’s logo and branding from your settings.
Update your logo in the Organization Settings page to see changes reflected in the widget.
Advanced Usage
Multiple Organizations
You can embed widgets for multiple organizations on the same page by adding multiple script tags with different data-changelog-org values.
Framework Integration
The widget works with all modern frameworks.
React / Next.js
// Add to your _app.tsx or layout.tsx
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.changelogy.com/changelog-widget.js';
script.setAttribute('data-changelog-org', 'your-company');
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
Vue.js
// In your main component
mounted() {
const script = document.createElement('script');
script.src = 'https://www.changelogy.com/changelog-widget.js';
script.setAttribute('data-changelog-org', 'your-company');
document.body.appendChild(script);
}
Angular
// Add to your index.html or use a service
ngOnInit() {
const script = document.createElement('script');
script.src = 'https://www.changelogy.com/changelog-widget.js';
script.setAttribute('data-changelog-org', 'your-company');
document.body.appendChild(script);
}
Troubleshooting
Widget not appearing?
- Ensure the widget is enabled in your dashboard
- Verify your
data-changelog-orgmatches your organization slug - Check browser console for JavaScript errors
- Make sure the script is inside the
<body>element
Widget showing empty content?
- Confirm you’ve published at least one changelog post
- Make sure posts are marked Published, not Draft
- Verify your organization slug is correct
Styling conflicts?
- The widget runs in an isolated iframe to prevent CSS issues
- If you see layout problems, check for z-index conflicts (widget uses
z-index: 999999) - Custom CSS cannot be applied to the widget for security reasons
Need More Help?
Can't find what you're looking for? We're here to help!