Tide
  • About Tide
    • 🌊Tide
    • 🚀Project? Let's grow!
    • 🛣️Roadmap
  • White-label
    • 🆕White-label Solutions
    • 🏷️Tide on your subdomain
    • 🖼️Simple Embeds
      • ⚒️Embedded campaigns
        • How to integrate embedded campaigns
        • Embed campaigns on your blog or docs
      • 🚀Embedded spaces
        • How to integrate embedded spaces
        • Embed spaces on your blog or docs
  • Projects
    • 🎨Space
      • ✅Space Verification
      • ⚽Space Collaboration
    • 🏗️Campaigns
      • 🥎Create a campaign
        • ⛓️On-chain Tasks
        • 🫂Off-chain Tasks
        • 💯Points Campaign
          • How to create a Point Campaign
          • Managing your Data Sources
        • 🔌 API Tasks
        • 🤝Mitigate Bots
      • 🏈Launch & Edit Campaigns
        • 🎾Manage and edit campaigns
      • ⏮️How to Manage Reviews
    • 🎁Rewards
      • 🔁Tide Reward Cycles
      • 🖼️Dynamic NFT Loyalty Program
      • ✌️Tide Referral Program
    • 📊Analytics
      • 📊Insights
    • ❓Project FAQ
  • Users
    • 👉Participate in campaigns
    • 🔔Get notified on new listings
    • 🔄Tide Reward Cycles
    • ❓Users FAQ
  • Resources
    • 🎨Brand Kit
    • 📖Tide vs Other Platforms
    • ⚖️Case Studies
      • Magpie Mafia Bridge
      • Decoding DEX Users
      • PoolTogether Marketing Initiatives analysis
      • Growth Challenges for Bridges
      • Tide “Audiences”: Engaging Authentic Users
      • Rodeo Finance Engagement Program
      • nftperp Paper Trading Competition
  • CONTRACTS & API
  • 📑Smart contracts overview
  • 🌊Wave Contract
  • 🏭Wave Factory
  • 📬Deployment addresses
  • ⌨️Tide APIs
Powered by GitBook
On this page
  • Integration methods
  • Basic HTML integration
  • Integration in a Next.js Website
  • Demo
  1. White-label
  2. Simple Embeds
  3. Embedded spaces

How to integrate embedded spaces

PreviousEmbedded spacesNextEmbed spaces on your blog or docs

Last updated 1 year ago

Integration methods

Tide embedded spaces feature supports two different types of integrations:

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 and interact with Tide embedded spaces. This will help you understand how the integration appears and works from a user's perspective.

🖼️
🚀
Tide SDK Example page
Basic HTML integration
Next.js apps integration