Skip to content

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. Embed a Convos are useful in scenarios when you have thousands of pages in your website or serve 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 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.

Customization Options

Query ParamDescriptionDefault Value
themeSet the default theme of the Convo. dark or lightdark
heightSet the default height of the Chat Element.300

Comments