Customizing Your Perk Frame

This guide will show you how to customize the appearance and placement of your Solana ID Perk Frame to match your brand.

Why customize it?

Make it match your brand! Perk Frames need to blend in with your UI.

---

Overview

The Perk Frame comes with default styling, but you can fully customize it using CSS. You can control:

• Size and dimensions

• Colors and backgrounds

• Button styling

• Position on the page

• Which pages it appears on

---

DOM Structure

Understanding the Perk Frame's structure helps with CSS targeting:

<div class="solana-id-YOUR-AGENT-ID-HERE">
  <div class="wrapper">
    <div class="perk-frame">
    
      <!-- PerkHeader -->
      <div class="perk-frame-header">
        <div class="perk-frame-text">
          <p class="perk-welcome-text">...</p>
          <p class="perk-title">...</p>
        </div>
        <div class="perk-close-btn">...</div>
      </div>
      
      <!-- PerkTicket -->
      <div class="perk-ticket">
        <div class="perk-left">
          <p class="perk-title-gradient">...</p>
          <p class="perk-subtitle-gradient">...</p>
          <div>
            <div class="perk-left-info">
              <img class="perk-ticket-logo" />
              <div class="perk-info-text">
                <p class="perk-info-title">...</p>
                <p class="perk-text-small">...</p>
              </div>
            </div>
          </div>
        </div>
        <div class="perk-right">
          <span class="up-circle circle"></span>
          <span class="down-circle circle"></span>
          <div class="perk-right-info">
            <p class="perk-discount">...</p>
            <p class="perk-off-text">...</p>
          </div>
          <a class="perk-button-link">
            <button class="perk-button">...</button>
          </a>
        </div>
      </div>
      
      <!-- PerkFooter -->
      <div class="perk-footer">
        <p class="perk-powered-by">...</p>
      </div>
      
      <!-- Expandable Content -->
      <div class="perk-expandable-content">
        <hr class="line" />
        <div class="expandable-box">
          <div class="expandable-box-header">
            <div class="expandable-box-header-text">
              <p>...</p>
            </div>
            <div class="expandable-box-icon">...</div>
          </div>
          <div class="expandable-box-content">
            <p>...</p>
          </div>
        </div>
        <div class="expandable-box">...</div>
        <div class="expandable-box">...</div>
        <p class="perk-expandable-content-text">
          ...
          <a class="text-link">...</a>
        </p>
      </div>
      
    </div>
  </div>
</div>

Basic Customization with CSS

Add Custom Styles

Create a CSS file or add styles to your existing stylesheet. All customizations should target the Perk Frame container and its internal classes.

Example: Basic Customization

/* ===== PERK FRAME CUSTOMIZATION ===== */

/* Adjust frame size and position, card background and border */
.perk-frame {
  position: fixed;
  bottom: 20px !important;
  right: 20px !important;
  left: unset !important;
  top: unset !important;
  z-index: 10;
  max-width: 320px !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border: 1px solid #0f3460 !important;
  border-radius: 16px !important;
}

/* Customize header */
.perk-frame-header {
  background-color: #0f3460 !important;
  color: #ffffff !important;
}

/* Customize claim button */
.perk-button {
  background: #5865f2 !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}

.perk-button:hover {
  background: #4752c4 !important;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* Customize expandable content */

.perk-expandable-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #1a1a1a;
  transition: height 0.2s ease;
  height: 0;
}

.expandable-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px 8px;
}

.expandable-box-content {
  transition: height 0.3s ease-out;
  height: 0px;
  overflow: hidden;
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .perk-frame {
    ...
  }
  
  ...
}

---

Controlling Where the Frame Appears

By default, if you add the Perk Frame script globally, it will appear on every page. Here's how to control this:

Show on Homepage Only

For React/Next.js Applications:

// pages/index.js (or your homepage component)
import Script from 'next/script';

export default function HomePage() {
  return (
    <>
      {/* Your homepage content */}
      <div className="homepage-content">
        <h1>Welcome to Our Platform</h1>
        {/* ... rest of content ... */}
      </div>

      {/* Perk Frame - Only on this page */}
      <div className="solana-id-YOUR-AGENT-ID-HERE"></div>
      
      <Script 
        src="https://perk.solana.id/solanaid-perkframe.bundle.js"
        strategy="lazyOnload"
      />
    </>
  );
}

For Standard HTML Sites:

Only include the Perk Frame code in your index.html or homepage template:

<!-- homepage.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Your Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <!-- Your homepage content -->
  <div class="homepage-content">
    <h1>Welcome to Our Platform</h1>
  </div>
  
  <!-- Perk Frame Container -->
  <div class="solana-id-YOUR-AGENT-ID-HERE"></div>
  
  <!-- Perk Frame Script -->
  <script src="https://perk.solana.id/solanaid-perkframe.bundle.js"></script>
  
</body>
</html>

Show on Multiple Specific Pages

For React/Next.js:

Create a reusable component:

// components/PerkFrame.jsx
import Script from 'next/script';

export default function PerkFrame() {
  return (
    <>
      <div className="solana-id-YOUR-AGENT-ID-HERE"></div>
      <Script 
        src="https://perk.solana.id/solanaid-perkframe.bundle.js"
        strategy="lazyOnload"
      />
    </>
  );
}

// Then use it in specific pages:
// pages/index.js
import PerkFrame from '../components/PerkFrame';

export default function HomePage() {
  return (
    <div>
      {/* Your content */}
      <PerkFrame />
    </div>
  );
}