Magic Field

How It Works

The Magic Field works by capturing user email addresses from your existing forms and automatically populating the referral widget. Here's the process:

1. You add a special data attribute to your existing email input fields
2. When a user enters their email in any of these fields
3. DaisyChain automatically captures it and stores it securely in the browser
4. When the referral widget appears, the email field is pre-filled
5. The user can immediately share without re-entering their email

Implementation

Adding the Magic Field to your website is simple. Just add the data-daisychain-email attribute to your existing email input fields:

<!-- Example: Newsletter signup form -->
<form id="newsletter-form">
  <input 
    type="email" 
    name="email" 
    placeholder="Your email address" 
    data-daisychain-email
  />
  <button type="submit">Subscribe</button>
</form>

That's it! DaisyChain will now automatically capture emails entered in this field and use them in the referral widget.

Multiple Forms

You can add the Magic Field to multiple forms across your website:

<!-- Login form -->
<form id="login-form">
  <input type="email" name="email" placeholder="Email" data-daisychain-email />
  <input type="password" name="password" placeholder="Password" />
  <button type="submit">Log In</button>
</form>

<!-- Contact form -->
<form id="contact-form">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="Your email" data-daisychain-email />
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>

Advanced Usage

Manual Email Setting

If you need more control, you can manually set the email using the JavaScript API:

// Set the email programmatically
window.DaisyChain.setUserEmail('user@example.com');

// Example: Setting email after form submission
document.getElementById('checkout-form').addEventListener('submit', function(e) {
  const email = document.getElementById('checkout-email').value;
  window.DaisyChain.setUserEmail(email);
});

Custom Data Attributes

You can use additional data attributes to provide more information about the user:

<input 
  type="email" 
  name="email" 
  placeholder="Your email address" 
  data-daisychain-email
  data-daisychain-name="John Doe"
  data-daisychain-user-id="12345"
/>

Or set these values programmatically:

window.DaisyChain.setUserData({
  email: 'user@example.com',
  name: 'John Doe',
  userId: '12345',
  customFields: {
    plan: 'premium',
    signupDate: '2023-01-15'
  }
});

Clearing User Data

You can clear the stored user data when needed:

// Clear all user data
window.DaisyChain.clearUserData();

// Example: Clear data on logout
document.getElementById('logout-button').addEventListener('click', function() {
  window.DaisyChain.clearUserData();
});

Integration Examples

<form id="checkout-form">
  <div class="form-group">
    <label for="checkout-email">Email</label>
    <input 
      type="email" 
      id="checkout-email" 
      name="email" 
      required 
      data-daisychain-email
    />
  </div>
  
  <!-- Other checkout fields -->
  
  <button type="submit">Complete Purchase</button>
</form>

<!-- Add the referral widget to the thank you page -->
<div id="thank-you-page">
  <h1>Thank you for your purchase!</h1>
  <div id="daisychain-widget"></div>
</div>

<script src="https://cdn.daisychain.la/widget.js" 
        data-program-id="YOUR_PROGRAM_ID" 
        data-api-key="YOUR_PUBLIC_API_KEY">
</script>

<form id="signup-form">
  <div class="form-group">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required />
  </div>
  
  <div class="form-group">
    <label for="signup-email">Email</label>
    <input 
      type="email" 
      id="signup-email" 
      name="email" 
      required 
      data-daisychain-email
    />
  </div>
  
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required />
  </div>
  
  <button type="submit">Create Account</button>
</form>

<script>
  // You can also capture additional user data on form submission
  document.getElementById('signup-form').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value;
    const email = document.getElementById('signup-email').value;
    
    window.DaisyChain.setUserData({
      email: email,
      name: name
    });
  });
</script>

Privacy Considerations

The Magic Field is designed with privacy in mind:

• Email addresses are stored locally in the browser using secure storage
• Data is only sent to DaisyChain when a user explicitly submits the referral form
• No tracking cookies are used for this feature
• User data can be cleared at any time using the JavaScript API

Troubleshooting

Best Practices

Next Steps

Now that you've implemented the Magic Field, you can:

• Monitor your referral program performance in the analytics dashboard
• Set up A/B testing to optimize your referral program
• Configure webhooks to integrate with your existing systems