Widget Troubleshooting Guide

Uncaught Error: Widget didn't find LoaderObject for instance premagic.

The loading script was either modified, no call to 'init' method was done

or there is conflicting object defined in `window.premagic`.

What This Means

This error occurs when the Premagic widget's main script loads but cannot find the expected loader setup on the page. The widget uses a two-part loading system:

1. Part 1: A small inline script that creates a queue for early calls

2. Part 2: The main widget script that processes the queue and initializes

When Part 2 loads but can't find Part 1's setup, this error is thrown.

Troubleshooting Steps

Step 1: Verify the Complete Embed Code

The widget requires both scripts to be present on the page:

✅ Correct Implementation

<!-- Part 1: Inline loader script (must come first) -->

<script>

  (function(w, d, s, o, f, js, fjs) {

    w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); };

    (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);

    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);

  })(window, document, 'script', 'premagic', 'https://your-cdn.com/premagic-poster-widget.js');

\
  premagic('init', {

    eventId: 'YOUR_EVENT_ID',

    // ... other config

  });

</script>

<!-- Part 2: Main widget container -->

<div id="widget-premagic"></div>

❌ Common Mistake: Only Main Script

<!-- Missing the inline loader! -->

<script src="https://your-cdn.com/premagic-poster-widget.js"></script>

<div id="widget-premagic"></div>

Solution: Ensure the customer is using the complete embed code provided in their account dashboard.

Step 2: Check for Missing 'init' Call

The widget must have at least one init call before or immediately after the script loads.

✅ Correct: Init Call Present

<script>

  // ... loader code ...

  premagic('init', {

    eventId: 'abc123',

    projectId: 'xyz789'

  });

</script>

❌ Incorrect: No Init Call

<script>

  // ... loader code ...

  // Missing: premagic('init', {...});

</script>

Solution: Add the init call with proper configuration.

Step 3: Check for Naming Conflicts

Another script on the page might be using window.premagic for something else.

Diagnostic Command

Ask the customer to open their browser console and run:

console.log(window.premagic);

console.log(window.premagic?.q);

Expected Output

// Before widget loads:

function() { ... }  // Queue function

[['init', {...}]]   // Array with init call

// After widget loads:

function(method, ...args) { ... }  // Real widget function

Problem Output

// If something else defined it:

{ someOtherProperty: 'value' }  // Wrong type!

undefined  // .q doesn't exist

Solution:

• Remove conflicting scripts

• Use a custom instance name if needed (advanced)

Step 4: Check for Script Blocking

The inline script might be blocked by:

1. Ad Blockers

• Ask customer to disable ad blockers temporarily

• Check if script loads with ad blocker off

2. Content Security Policy (CSP)

• Check browser console for CSP errors

• Verify script-src allows inline scripts

• Required CSP directives:

  
  script-src 'unsafe-inline' 'self' https://your-cdn.com;
  
  

3. Browser Extensions

• Try in incognito/private mode

• Disable browser extensions one by one

Solution: Update CSP headers or whitelist the widget domain.

Step 5: Verify Load Order

The scripts must load in this order:

1. ✅ Inline loader script

2. ✅ premagic('init', ...) call

3. ✅ Main widget script loads (async)

4. ✅ Widget initializes

Common Load Order Issues

❌ Init called after main script loads:

<script src="widget.js" async></script>

<!-- Later in page -->

<script>

  premagic('init', {...});  // Might be too late!

</script>

✅ Correct: Init in same block as loader:

<script>

  // Loader code

  premagic('init', {...});  // Queued before main script loads

</script>

<script src="widget.js" async></script>

Quick Diagnostic Checklist

Send this checklist to customers:

• [ ] Both inline loader AND main script are present

• [ ] premagic('init', {...}) is called with valid config

• [ ] No ad blockers are running

• [ ] No CSP errors in browser console

• [ ] No other scripts use window.premagic

• [ ] Widget container exists: <div id="widget-premagic"></div>

• [ ] Tested in incognito mode (no extensions)

Advanced Solutions

Using Custom Instance Names

If there's a naming conflict, customers can use a custom instance name:

<script>

  (function(w, d, s, o, f, js, fjs) {

    w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); };

    // ... loader code ...

  })(window, document, 'script', 'myCustomWidget', 'https://...');

\
  myCustomWidget('init', {...});  // Use custom name

</script>

Debugging with Console

// Check if loader is set up

console.log('Loader exists:', typeof window.premagic === 'function');

console.log('Queue exists:', Array.isArray(window.premagic?.q));

console.log('Queue contents:', window.premagic?.q);

// Check if widget loaded

console.log('Widget loaded:', window['loaded-premagic']);

Common Questions

Q: Can we load the script dynamically via JavaScript?

A: Yes, but ensure the loader is created first:

// Create loader first

window.premagic = window.premagic || function() {

  (window.premagic.q = window.premagic.q || []).push(arguments);

};

// Call init

premagic('init', { eventId: 'abc123' });

// Load main script

const script = document.createElement('script');

script.src = 'https://your-cdn.com/premagic-poster-widget.js';

script.async = true;

document.head.appendChild(script);

Q: Can we use multiple widgets on the same page?

A: Yes, use different instance names for each widget (see Advanced Solutions above).

Q: Does this work with React/Vue/Angular?

A: Yes, but ensure the loader script runs before component mount. Use useEffect (React) or lifecycle hooks to initialize.

Getting More Help

If none of these solutions work:

1. Check browser console for additional error messages

2. Capture network tab showing script loading

3. Share the page URL (or HTML source) for debugging

4. Contact support with:

   • Browser/OS version

   • Console error screenshot

   • Network tab screenshot

   • Embed code being used