​
Overview

The Earn Wizard is a tool that allows you to customize your Earn Widget. Provides a visual interface to:
  • Customize the widget’s appearance to match your brand
  • Select which products and campaigns to offer
  • Preview changes in real-time
  • Generate configuration JSON automatically
  • Access a hosted version of your widget

​
Accessing the Wizard

To access the Widget Wizard:
  1. Log in to the Turtle Client Portal
  2. Navigate to Distribution > Wizard
  3. Start customizing your widget
Alt text describing the image

​
Configuration Options

​
Basic Settings

Configure fundamental widget properties:
  • Organization Logo: Toggle to use your organization’s logo or provide a custom one
  • Fallback Logo Text: Text displayed when no logo image is available
  • Navigation: Show or hide the navigation tabs
  • Padding: Adjust internal spacing (Small, Medium, Large)

​
Typography

Customize fonts to match your brand:
  • Primary Font: Main font for headings and important text
  • Secondary Font: Font for body text and descriptions

​
Campaigns & Deals

Select which opportunities to display:
  • Campaigns: Enable specific campaigns like “Katana”
  • Deals: Choose individual deals to feature in your widget

​
Color Customization

The wizard provides two ways to customize colors:

​
Color Presets

Quick-start with pre-designed color themes:
  • Turtle Green: Default green theme
  • Ocean Blue: Cool blue theme
  • Sunset Orange: Warm orange theme
  • Midnight Purple: Deep purple theme
Alt text describing the image

​
Custom Colors

Fine-tune individual color values:
  • Background Color: Main widget background
  • Foreground Color: Primary text color
  • Primary Color: Accent color for buttons and highlights
  • Muted Foreground: Secondary text color
Each color supports both light and dark mode variants.

​
Real-time Preview

As you make changes in the wizard, the preview panel on the right updates instantly to show how your widget will look. This allows you to experiment with different configurations before saving.

​
Configuration Output

​
Viewing the Configuration

Click the Code tab at the bottom of the wizard to see the generated JSON configuration:
Alt text describing the image

​
Using the Configuration

You have two options for using the generated configuration:

​
Option 1: Static Configuration

Copy the JSON and use it directly in your code: 
const widgetConfig = {
  "campaigns": ["2c86d3d1-cfe8-486d-915d-1b9ff5e924e9"],
  "customWidth": "none",
  "deals": [],
  "fontFamily": "Montserrat Medium, sans-serif",
  "fontSecondary": "DM Sans, sans-serif",
  "logo": {
    "dark": "",
    "fallback": "Turtle",
    "light": ""
  },
  "padding": "lg",
  "rounding": "default",
  "showNavigation": true,
  "styles": {
    "background": "#f7f7f7",
    "background_dark": "#141514",
    "card": "#2A2B2A",
    "foreground": "#1b1b2b3",
    "foreground_dark": "#F9F9F9",
    "muted_foreground": "#6b7280",
    "muted_foreground_dark": "#9ca3af",
    "primary": "#73F36C",
    "primary_dark": "#73F36C"
  },
  "theme": "dark",
  "widgetWidth": "default"
};

<EarnWidget
  config={widgetConfig}
  adapter={adapter}
  distributorId="YOUR_DISTRIBUTOR_ID"
/>

​
Option 2: Dynamic Configuration

Fetch the configuration from our API endpoint: 
const response = await fetch('https://api.turtle.xyz/widget/YOUR_DISTRIBUTOR_ID');
const widgetConfig = await response.json();
Find your distributor ID in Distribution > Dashboard in the Client Portal.

​
Hosted Widget

Alt text describing the image
Don’t want to implement the widget yourself? Use our hosted version:
  1. Click View Widget button in the wizard
  2. You’ll be redirected to a production-ready implementation
  3. Changes saved in the wizard are reflected immediately
The hosted widget URL can be shared directly with your users no need to implement the widget yourself.

​
Troubleshooting

Make sure you’ve clicked “Save changes” in the wizard. The hosted widget updates automatically after saving.
Verify your distributor ID is correct. You can find it in Distribution > Dashboard.
Ensure the font names are spelled correctly and are web-safe fonts. Consider using Google Fonts for better compatibility.