search

How to integrate embedded spaces

hashtag
Integration methods

Tide embedded spaces feature supports two different types of integrations:

  1. Basic HTML integration

  2. Next.js apps integration

hashtag
Basic HTML integration

Embed the space banner

Insert the following HTML snippet into your website where you want the space banner to appear. Replace [space-id] with the specific ID of your space. The data-background-color attribute is optional and can be used to set a custom background color for the space banner. The data-text-color attribute is also optional and can be used to set a custom text color for the space banner. There's also the possibility to change the modal theme color, which is Dark by default. To set the Light theme simply add the light-mode="true" parameter.

<div class="tide-embedded"
    data-background-color="[not-required-hex-color]"
    data-text-color="[not-required-hex-color]"
    dark-mode="true"
    data-space-id="[space-id]">
</div>
<script async src="https://www.tideprotocol.xyz/embed.js"></script>

hashtag
Integration in a Next.js Website

Insert Script Tag in <Head> In a Next.js application, due to its server-side rendering, you need to insert the <script> tag inside the <Head> component from next/head. Ensure that this component is in the same component as your div with the class tide-embedded.

hashtag
Demo

Visit the Tide SDK Example pagearrow-up-right and interact with Tide embedded spaces. This will help you understand how the integration appears and works from a user's perspective.

PreviousEmbedded spacesNextEmbed spaces on your blog or docs

Last updated