Integration Options
Iframe Embedding
The iframe embedding option allows you to integrate comments into any website without requiring React or any other JavaScript framework. This is ideal for static websites or platforms where you can't modify the JavaScript code.
Demo
Generate an iframe code for your website
iframe embed code
Copy and paste this into your website or blog, or anywhere HTML is supported
Make sure to set the
Content-Security-Policy
header with frame-src
allowing
. See CSP frame-src.Preview
URI Guidelines
When entering your page URI in the configurator, follow these guidelines:
- Must be a valid URL following RFC 3986
- Include query parameters that affect page content
- Arrange query parameters alphabetically
- Ensure the URI uniquely identifies the content being commented on
Dynamic Height Support
If you want the iframe to automatically adjust its height based on content, add this JavaScript code:
<script>
window.addEventListener("message", function (event) {
if (
event.origin !== "https://embed.ethcomments.xyz" ||
event.data.type !== "@ecp.eth/sdk/embed/resize"
) {
return;
}
document.getElementById("comments-iframe").style.height =
event.data.height + "px";
});
</script>
Security Best Practices
- Always use HTTPS for the iframe source
- Consider adding
sandbox
attribute if you need to restrict iframe capabilities - Verify the origin of resize messages as shown in the dynamic height example
Notion Integration
You can embed the comments iframe in a Notion page by using a Notion embed block:
- In your Notion page, click the
+
button to add a new block - Search for "Embed" and select the embed block
- Paste the iframe URL (the
src
attribute from the generated iframe code) - Click "Embed link" to add the comments to your page
The comments will appear directly in your Notion page and update in real-time.
Next Steps
- Check out how to retrieve comments and replies
- Learn about React Integration for React applications