Optimizing Perk Frames on Mobile

For mobile devices, you may want to use a small clickable icon instead of displaying the full Perk Frame by default.

Why optimize it?

Don't let Perk Frames take away too much of your apps UI - they are supposed to blend in.

---

Mobile-Friendly: Toggle Icon Approach

How It Works

1. On mobile: A small gift icon appears in the corner

2. User taps the icon: The full Perk Frame pops up

3. On desktop: The Perk Frame shows normally (or you can use the icon approach too)

---

Implementation

Step 1: Add the HTML

Add this code where you want the Perk Frame to appear:

<!-- Perk Frame Container (hidden by default on mobile) -->
<div class="solana-id-YOUR-AGENT-ID-HERE perk-frame-container"></div>

<!-- Mobile Toggle Icon (only visible on mobile) -->
<button class="perk-toggle-icon" aria-label="View your perks">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="32">
    <path fill="currentColor" d="M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z"/>
  </svg>
  <span class="perk-notification-dot"></span>
</button>

<!-- Perk Frame Script -->
<script src="https://perk.solana.id/solanaid-perkframe.bundle.js"></script>

---

Step 2: Add the CSS

/* ===== MOBILE TOGGLE ICON STYLING ===== */

/* The toggle icon button */
.perk-toggle-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.perk-toggle-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.perk-toggle-icon:active {
  transform: scale(0.95);
}

.perk-toggle-icon svg {
  width: 28px;
  height: 28px;
}

/* Notification dot (optional - shows when user has perks) */
.perk-notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background-color: #ff4757;
  border: 2px solid white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Hide icon on desktop, show perk frame normally */
@media (min-width: 768px) {
  .perk-toggle-icon {
    display: none;
  }
  
  .perk-frame-container {
    display: block !important;
  }
}

/* On mobile: hide perk frame by default, show icon */
@media (max-width: 767px) {
  .perk-frame-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    max-width: 90vw;
    max-height: 80vh;
    animation: popIn 0.3s ease-out;
  }
  
  .perk-frame-container.active {
    display: block !important;
  }
  
  /* Backdrop overlay when perk frame is open */
  .perk-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    display: none;
  }
  
  .perk-backdrop.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

---

Step 3: Add the JavaScript

Add this script to handle the toggle functionality:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const toggleIcon = document.querySelector('.perk-toggle-icon');
    const perkFrame = document.querySelector('.perk-frame-container');
    
    // Create backdrop element
    const backdrop = document.createElement('div');
    backdrop.className = 'perk-backdrop';
    document.body.appendChild(backdrop);
    
    // Toggle perk frame on icon click
    toggleIcon.addEventListener('click', function() {
      perkFrame.classList.toggle('active');
      backdrop.classList.toggle('active');
    });
    
    // Close perk frame when clicking backdrop
    backdrop.addEventListener('click', function() {
      perkFrame.classList.remove('active');
      backdrop.classList.remove('active');
    });
    
    // Optional: Close on escape key
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        perkFrame.classList.remove('active');
        backdrop.classList.remove('active');
      }
    });
  });
</script>

---

Alternative: Icon Shows on All Screen Sizes

If you want the toggle icon approach on both mobile and desktop (not just mobile), use this simplified CSS instead:

/* Toggle icon always visible */
.perk-toggle-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.perk-toggle-icon:hover {
  transform: scale(1.1);
}

/* Perk frame hidden by default, shows when active */
.perk-frame-container {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
}

.perk-frame-container.active {
  display: block !important;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .perk-frame-container {
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
  }
  
  .perk-frame-container.active {
    transform: translate(-50%, -50%) !important;
  }
}

---

Customization Options

Change Icon Color

.perk-toggle-icon {
  background: #your-brand-color;
}

Change Icon Size

.perk-toggle-icon {
  width: 48px;  /* Smaller */
  height: 48px;
}

.perk-toggle-icon svg {
  width: 24px;
  height: 24px;
}

Use a Different Icon

Replace the SVG with your own:

• Gift box (current)

• Bell icon (for notifications)

• Star icon (for rewards)

• Custom logo