# How to integrate embedded campaigns

## Integration methods

Tide embedded campaigns feature supports two different types of integrations:

1. &#x20;[Basic HTML integration](#basic-html-integration)
2. &#x20;[Next.js apps integration](#integration-in-a-next.js-website)

### Basic HTML integration&#x20;

**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.

```html
<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`.<br>

```jsx
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](https://tide-sdk-example.vercel.app/embedded-campaign) and interact with Tide embedded campaigns. This will help you understand how the integration appears and works from a user's perspective.
