Widget Customization

Customize the appearance and behavior of your referral widget to match your brand identity and maximize conversions.

Widget Overview

The DaisyChain referral widget is a customizable component that you can embed on your website to collect referrals. It's designed to be highly customizable while maintaining a great user experience across all devices.

Key features:

  • Visual customization with live preview
  • Theme support (light/dark)
  • Responsive design for all devices
  • Accessibility compliance
  • Multiple layout options
  • Custom text and messaging

Customization Options

Visual Appearance

Customize the look and feel of your widget to match your brand:

  • Primary Color: Set the main color for buttons and accents
  • Background Color: Choose a background color or use transparency
  • Text Colors: Customize heading, body, and link text colors
  • Border Radius: Adjust the roundness of corners
  • Shadow: Add depth with customizable shadows
  • Font: Select from available font families or use your website's font

Content Customization

Tailor the messaging to match your brand voice and program:

  • Heading: Set a compelling main heading
  • Subheading: Add supporting text to explain the program
  • Form Labels: Customize input field labels
  • Button Text: Change the call-to-action text
  • Success Message: Customize the message shown after successful submission
  • Terms Text: Add your terms and conditions

Layout Options

Choose from different layout styles:

  • Inline: Embed directly within your page content
  • Modal: Display as a popup triggered by a button
  • Sidebar: Show as a slide-in panel from the edge of the screen
  • Floating: Display as a floating button that expands when clicked

Behavior Settings

Control how the widget behaves:

  • Display Timing: When to show the widget (immediately, after delay, on exit intent)
  • Animation: Choose entrance and exit animations
  • Required Fields: Configure which fields are mandatory
  • Form Validation: Set custom validation rules and messages
  • Success Behavior: What happens after successful submission

Using the Customizer

DaisyChain provides an intuitive visual customizer in your dashboard:

  1. Navigate to the UI Preview section in your dashboard
  2. Select a program to customize the widget for
  3. Use the customization panel to adjust appearance, content, and behavior
  4. See changes in real-time in the preview area
  5. Save your customizations when you're satisfied
  6. Get the embed code to add to your website

💡 Pro Tip

Create multiple widget styles for different pages or campaigns. You can have different styles for your homepage, product pages, and checkout page to optimize for each context.

Advanced Customization

For developers who need more control, DaisyChain offers advanced customization options:

Custom CSS

Add your own CSS to further customize the widget appearance:

// Add this to your embed code
<style>
  .daisychain-widget {
    /* Your custom styles */
  }
  .daisychain-widget .dc-button {
    /* Custom button styles */
  }
  .daisychain-widget .dc-input {
    /* Custom input styles */
  }
</style>

JavaScript Customization

Use the JavaScript API to programmatically control the widget:

// Initialize with custom options
DaisyChain.init({
  programId: 'your_program_id',
  apiKey: 'your_public_api_key',
  theme: 'light',
  onSuccess: function(data) {
    // Custom success handler
    console.log('Referral submitted:', data);
  },
  onError: function(error) {
    // Custom error handler
    console.error('Error:', error);
  }
});

// Show or hide the widget programmatically
document.getElementById('show-widget').addEventListener('click', function() {
  DaisyChain.show();
});

document.getElementById('hide-widget').addEventListener('click', function() {
  DaisyChain.hide();
});

Best Practices

Keep it Simple

Avoid cluttering your widget with too much information. Focus on the core message and make the action clear.

Match Your Brand

Use colors, fonts, and messaging that align with your brand identity for a seamless experience.

Highlight the Value

Clearly communicate the benefits of your referral program to encourage participation.

Test Different Versions

Use A/B testing to compare different widget designs and messaging to optimize conversion rates.

Mobile Optimization

Always check how your widget appears on mobile devices, as many users will view it on smaller screens.

Next Steps

Now that you've customized your widget, you're ready to: