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
