Embed Code

Add the DaisyChain referral widget to your website with a simple embed code. This guide explains how to implement and troubleshoot the widget integration.

Getting Your Embed Code

After customizing your referral widget, you'll need to add it to your website. DaisyChain generates a simple embed code that you can copy and paste into your HTML.

  1. Go to your DaisyChain dashboard
  2. Navigate to the "UI Preview" section
  3. Select the referral program you want to embed
  4. Click on "Get Embed Code" in the top right
  5. Copy the generated code to your clipboard

Basic Implementation

The embed code consists of two parts: a script tag and a container element. Here's a basic example:

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

Add this code to your website where you want the widget to appear. The script automatically initializes the widget in the specified container.

💡 Pro Tip

For the best user experience, place the widget in a prominent location where users are likely to engage with it, such as after checkout, in account pages, or in a fixed position on your site.

Configuration Options

You can customize the widget behavior by adding data attributes to the script tag:

AttributeDescriptionDefault
data-program-idYour referral program ID (required)-
data-api-keyYour public API key (required)-
data-themeWidget theme (light, dark, or auto)auto
data-containerCustom container selector#daisychain-widget
data-displayDisplay mode (inline, modal, sidebar, floating)inline
data-auto-openAutomatically open the widget (true/false)false
data-delayDelay in ms before showing the widget0
data-positionPosition for floating/sidebar (top-left, top-right, etc.)bottom-right

Example with additional configuration:

<script src="https://cdn.daisychain.la/widget.js" 
        data-program-id="YOUR_PROGRAM_ID" 
        data-api-key="YOUR_PUBLIC_API_KEY"
        data-theme="dark"
        data-display="modal"
        data-auto-open="false"
        data-delay="2000">
</script>

JavaScript API

For more control, you can use the JavaScript API to interact with the widget programmatically:

// Initialize with custom options
window.DaisyChain.init({
  programId: 'YOUR_PROGRAM_ID',
  apiKey: 'YOUR_PUBLIC_API_KEY',
  theme: 'light',
  display: 'modal',
  container: '#custom-container',
  onLoad: function() {
    console.log('Widget loaded');
  },
  onSubmit: function(data) {
    console.log('Form submitted', data);
  },
  onSuccess: function(response) {
    console.log('Referral created', response);
  },
  onError: function(error) {
    console.error('Error', error);
  }
});

// Control the widget
document.getElementById('open-widget').addEventListener('click', function() {
  window.DaisyChain.open();
});

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

// Check if a user has a referral code
window.DaisyChain.hasReferralCode().then(function(result) {
  if (result) {
    console.log('User has a referral code');
  }
});

// Get the current user's referral code
window.DaisyChain.getUserReferralCode().then(function(code) {
  if (code) {
    console.log('User referral code:', code);
  }
});

Note

The JavaScript API is available after the widget script has loaded. You can use the window.DaisyChainLoaded event to detect when it's ready.

Integration Examples

Modal on Button Click

Display the widget as a modal when a button is clicked:

<button id="show-referral">Refer a Friend</button>

<div id="daisychain-widget"></div>
<script src="https://cdn.daisychain.la/widget.js" 
        data-program-id="YOUR_PROGRAM_ID" 
        data-api-key="YOUR_PUBLIC_API_KEY"
        data-display="modal"
        data-auto-open="false">
</script>

<script>
  document.getElementById('show-referral').addEventListener('click', function() {
    window.DaisyChain.open();
  });
</script>

Post-Purchase Integration

Show the widget after a successful purchase:

<div id="thank-you-page">
  <h1>Thank you for your purchase!</h1>
  <p>Order #12345 has been confirmed.</p>
  
  <div class="mt-8">
    <h2>Share with friends and earn rewards!</h2>
    <div id="daisychain-widget"></div>
  </div>
</div>

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

Floating Button

Add a persistent floating button that expands into the widget:

<div id="daisychain-widget"></div>
<script src="https://cdn.daisychain.la/widget.js" 
        data-program-id="YOUR_PROGRAM_ID" 
        data-api-key="YOUR_PUBLIC_API_KEY"
        data-display="floating"
        data-position="bottom-right">
</script>

Troubleshooting

Widget Not Displaying

  • Verify that the container element exists in your HTML
  • Check that your program ID and API key are correct
  • Ensure there are no JavaScript errors in the console
  • Confirm that the widget script is loading properly

Styling Conflicts

  • Inspect the widget elements for any CSS conflicts
  • Try adding !important to widget styles if needed
  • Use a more specific container to isolate the widget

Form Submission Issues

  • Check the browser console for API errors
  • Verify that your API key has the correct permissions
  • Ensure the program is active and properly configured
  • Test with the onError callback to debug submission issues

Best Practices

Load Asynchronously

Add the async attribute to the script tag to prevent blocking page rendering.

Strategic Placement

Place the widget where users are most likely to engage with it, such as post-purchase pages, account dashboards, or product pages.

Test Across Devices

Ensure the widget displays correctly on desktop, tablet, and mobile devices.

Error Handling

Implement proper error handling to provide feedback to users if something goes wrong.

Next Steps

Now that you've added the widget to your website, you can: