Embedding on Your Website

Integrating your Changeloger content onto external websites is a seamless process using the Embed feature. By leveraging iframes, you can easily share your product releases, feedback submission boards, or roadmap kanban displays with your stakeholders directly on your documentation, support portals, or landing pages.

• Getting the Embed Code
• Using the Iframe
• Responsive Embedding
• Embed Settings

Getting the Embed Code

To obtain your unique embed snippet, navigate to Changeloger > Releases in your WordPress admin dashboard and select your desired product from the sidebar. Click on the Embed icon (</>) to open the configuration modal. Here, you can select the specific content type—Releases, Feedback, or Roadmap—and choose between the Light or Dark theme to ensure the embedded content matches your external site’s design.

Using the Iframe

Once you have configured your preferences, copy the provided code snippet. You can paste this directly into the HTML of your external website. The following is an example of the standard implementation:

<iframe 
 src="https://yoursite.com/?cha_embed=1&product=5&type=releases&theme=light" 
 width="100%" 
 height="600" 
 frameborder="0" 
 style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>

Responsive Embedding

To ensure your embedded changelog or roadmap remains responsive across different screen sizes, wrap the iframe in a container with relative positioning. This prevents layout issues on mobile devices:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
 <iframe 
 src="https://yoursite.com/?cha_embed=1&product=5&type=roadmap" 
 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
 frameborder="0">
 </iframe>
</div>

Embed Settings

You can manage visibility of the "Powered by Changeloger" watermark by navigating to Changeloger > Settings > Embed. Additionally, the plugin is configured for Cross-Origin Access by default, ensuring compatibility with your external platforms by automatically setting appropriate X-Frame-Options and Content-Security-Policy headers.