# How to integrate embedded spaces

## Integration methods

Tide embedded spaces 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 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.

```html
<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`.<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-space-id="[space-id]">
  </div>
</div>
```

### Demo

Visit the [Tide SDK Example page](https://tide-sdk-example.vercel.app/embedded-campaign) and interact with Tide embedded spaces. This will help you understand how the integration appears and works from a user's perspective.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fiveelementslabs.gitbook.io/tide/white-label/simple-embeds/embedded-spaces/how-to-integrate-embedded-spaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
