How to integrate embedded spaces

Integration methods

Tide embedded spaces feature supports two different types of integrations:

  1. Basic HTML integration

  2. Next.js apps integration

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>

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. 

import Head from 'next/head';

// In your component's render method
<div>
  <Head>
    <script async src="https://www.tideprotocol.xyz/embed.js"></script>
  </Head>
  <div className="tide-embedded"
       data-background-color="[not-required-hex-color]"
       data-text-color="[not-required-hex-color]"
       dark-mode="true" //replace with light-mode for light theme
       data-space-id="[space-id]">
  </div>
</div>

Demo

Visit the Tide SDK Example page 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