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. The data-text-color attribute is also optional and can be used to set a custom text color for the campaign 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-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-text-color="[not-required-hex-color]"
       dark-mode="true" //replace with light-mode for light theme
       data-campaign-id="[campaign-id]">
  </div>
</div>

Demo

Visit the Tide SDK Example page and interact with Tide embedded campaigns. This will help you understand how the integration appears and works from a user's perspective.

PreviousEmbedded campaigns NextEmbed campaigns on your blog or docs

Last updated 1 month ago