Widget Integration

Add Live Design Support to Your Product Pages

Place a small widget on your product pages so customers can instantly connect with a professional designer via live video call. They get expert help choosing, customizing, or visualizing products — right from your store.

One line of code — works with Shopify, WooCommerce, or any site
Widget auto-hides when no designers are online
Customers click and start a live video session in seconds
Increases conversions and reduces support tickets
yourstore.com/products/custom-tshirt
$29.99

Need Custom Design?

From $8 Available now

Your widget appears here
+23% Conversions
1-Line Integration

Widget Customization

Add this script tag to your website's HTML, before the closing </body> tag.

<script src="https://instantdesigner.com/widget.js" data-style="floating" data-position="bottom-right" data-primary-color="#f97316" data-accent-color="#ec4899"></script>

🔌 Designer Availability API

Check if designers are online and show/hide your own UI elements accordingly.

GET/api/public/online-status

Response: { online: boolean, count: number }

✅ No authentication required✅ CORS enabled⏱ Poll every 30s

Use Cases

  • Show/hide a "Talk to Designer" button in your navigation
  • Display an availability badge on product pages
  • Toggle sidebar widgets or notification dots
  • Build your own custom widget with full control

💡 Tip: Our script widget also supports data-toggle-selector — just point it to any CSS selector and the element will auto show/hide based on availability. Zero JavaScript needed!

Example: Show/hide a button
// Check designer availability
async function checkDesigners() {
  try {
    const res = await fetch(
      'https://instantdesigner.com/api/public/online-status'
    );
    const data = await res.json();

    // data.online → true/false
    // data.count → number of designers

    const btn = document.getElementById('designer-btn');
    if (btn) {
      btn.style.display = data.online ? '' : 'none';
    }

    return data;
  } catch {
    return { online: false, count: 0 };
  }
}

// Check on load + every 5 minutes
checkDesigners();
setInterval(checkDesigners, 300000);

Example HTML button to toggle:

<button id="designer-btn" style="display:none">
  💬 Talk to a Designer
</button>