```

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

---