Tide
Search
K

How to integrate embedded campaigns

Integration methods

Tide embedded campaigns feature supports two different types of integrations:

Basic HTML integration

Embed the campaign banner
Insert the following HTML snippet into your website where you want the campaign banner to appear. Replace [campaign-id] with the specific ID of the campaign you want to display. The data-background-color attribute is optional and can be used to set a custom background color for the campaign banner.
<div class="tide-embedded"
data-background-color="[not-required-hex-color]"
data-campaign-id="[campaign-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-campaign-id="[campaign-id]">
</div>
</div>

Demo

Visit the Tide SDK Example page and interact with the Tide campaign banner and modal. This will help you understand how the integration appears and functions from a user's perspective.