Embed a Convo

Introduction

You can utilize Convo to create a dynamic comments section on any page/section of a website with a fully built UI provided by Convo. Embeds are useful in scenarios like serving dynamically generated pages requiring one or multiple comment boxes on each one of those pages.

Refer here, if you are looking to build a Custom UI instead of using an Iframe.

Integration

Embed a Convos use a combination of the Site URL and Custom Thread ID to uniquely identify a comments section without having to create one through Convo's Interface.

// Link Format
https://theconvo.space/embed/dt?url=url-encoded-website-link&threadId=unique-thread-identifier

Here are the details on the required query parameters for a dynamic embeddable convo,

url: This is the url encoded (encodeURIComponent()) full website link. This should ideally contain the url without any query parameters or internal links (i.e origin+pathname). You can use new URL("<your-site-url>") to clean your url and get the origin and pathname values easily.
threadId: This is a unique identifier for the comments page on your site, you can set unique values for this key to have multiple threads on the same url. ThreadId is your own unique identifier, doesn't have to come from Convo. Could be a Contract Address, NFT Id etc

ℹ️

Values of url and threadId combined become the primary identifier for a dynamic Convo. Do not use the same values for url and threadId on a different page/element unless you want the same Convo over there too.

Example,

<iframe id="frm" src="https://theconvo.space/embed/dt?url=https%3A%2F%2Fdeepdao.io%2F&threadId=fJPU8mZiQwVXV6K1xXlw" allowtransparency="true" width="100%" height="600px" style="border: none;">
  Comments
</iframe>

Now you can use this snippet on any website by simply inserting this HTML wherever you want the comments page to appear.

ℹ️

Here it is recommended to set allowtransparency="true" in the iframe to automatically adapt the iframe to the color scheme of the page.

Generator

Start by Entering a URL and ThreadId

Customization Options

Query Param	Description	Default Value
theme	Set the default theme of the Convo. `dark` or `light`	`dark`
height	Set the default height of the Chat Element.	`300`

Communicating with the Embed

We use window.postMessage() (opens in a new tab) with the target key in the message data as convo-embed.

Update Theme

const msg = {
  target: "convo-embed",
  action: "setTheme",
  data:{
    theme:"light"
  }
};
const frm = document.getElementById('frm').contentWindow;
frm.postMessage(msg, "https://theconvo.space/");

Allowed values for theme are: dark & light.

Use Custom Auth

Coming Soon.

Use Custom Avatars

Coming Soon.

Comments

Getting Started Embed a Comment