Add a Premagic login widget to your Swoogo registration, then show a personalized poster on the confirmation page.

You need **two snippets**:

1. **Login widget** — on the first registration page. It logs the person in and auto-fills the registration form.

2. **Poster widget** — on the confirmation page. It shows a poster personalized for that person.

Before you start, get your **share id** from the Premagic account app (your event → widgets code generator). You'll use it in both snippets.

---

## How to add a snippet in Swoogo

Swoogo has no "Custom HTML" block — custom code goes in through **Snippets**. You create a snippet once, then drag it onto a page.

**1. Create it:** Go to **Design → Snippets → Create Snippet** and fill in:

* **Name** — anything, e.g. Premagic login widget (just for you).

* **Code Position** — choose **Snippet widget**. (This is what makes it draggable in the builder.)

* **Use {{ merge-field }} syntax** — leave unchecked.

* **HTML / CSS / JS** — three boxes. Paste the code from below into the right boxes. Don't add <script> tags in the JS box.

Click **Save**.

**2. Place it:** Open the website builder, go to the page you want, drag the **Snippet** block onto it, and pick your snippet.

**3. Test on the live page:** The builder preview may not run JavaScript, so the widget can look broken while editing. Always check the real **published page**.

---

## Snippet 1 — Login widget

Put this on your first registration page. Replace YOUR_SHARE_ID.

**HTML box:**

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

**JS box:**

```
window.addEventListener("PREMAGIC:registration:completed",function(e){try{localStorage.setItem("premagic_user",JSON.stringify(e.detail.userData||{}))}catch(e){}});
var PM_config={
shareId:"<<<<<YOUR_SHARE_ID>>>>>>",
embedWidgetFlow:"registration",autofillerConfig:{enabled:!0,selectors:{firstName:"[name='Registrant[first_name]']",lastName:"[name='Registrant[last_name]']",companyName:"[name='Registrant[company]']",role:"[name='Registrant[job_title]']",email:"[name='Registrant[email]']"}}},PM_URL="https://asts.premagic.com/s/poster-widget/premagic-poster-widget.js";!function(e,t){e.premagic=e.premagic||function(){(e.premagic.q=e.premagic.q||[]).push(arguments)};var a=t.createElement("script"),i=t.getElementsByTagName("script")[0];a.id="premagic",a.src=PM_URL,a.defer=1,a.type="module",i.parentNode.insertBefore(a,i)}(window,document),premagic("init",PM_config);

```

**About the auto-fill:** when the person logs in, the widget fills the registration fields listed in selectors on the same page. The [name='...'] values must match your form's real field names — to find them, right-click a field → **Inspect** and read its name (Swoogo names them like Registrant[first_name]). A field that isn't on the page is simply skipped.

The localStorage line at the top saves the person's login so the poster page can use it. Don't add a redirectUrl — let Swoogo's own Continue button move through the steps.

---

## Snippet 2 — Poster widget

Put this on your confirmation / success page. Replace `<<<<YOUR_SHARE_ID>>>>`.

**HTML box:**

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

**JS box:**

```
var pmUser={};try{pmUser=JSON.parse(localStorage.getItem("premagic_user")||"{}")}catch(e){}
var PM_config={
shareId:"<<<<<YOUR_SHARE_ID>>>>>>",
embedWidgetFlow:"poster_creation",type:"ATTENDEE",widgetStyle:"preview",prefillData:{registrationId:pmUser.registrationId||pmUser.id||"",userName:pmUser.userName||"",userTitle:pmUser.userTitle||"",userCompany:pmUser.userCompany||"",userPhoto:pmUser.userPhoto||"",email:pmUser.email||""}},PM_URL="https://asts.premagic.com/s/poster-widget/premagic-poster-widget.js";!function(e,r){e.premagic=e.premagic||function(){(e.premagic.q=e.premagic.q||[]).push(arguments)};var t=r.createElement("script"),i=r.getElementsByTagName("script")[0];t.id="premagic",t.src=PM_URL,t.defer=1,t.type="module",i.parentNode.insertBefore(t,i)}(window,document),premagic("init",PM_config);
```

This reads the saved login and shows a poster already personalized for that person. The event needs at least one poster created in Premagic.

---

## If something doesn't work

* **Nothing shows up:** check the browser console for an error — usually a missing comma in the code.

* **Shows in the builder but not live (or vice-versa):** test on the published page.

* **Auto-fill fills nothing:** the field name in selectors doesn't match. Inspect the field and copy its exact name. (Auto-fill only fills fields on the same page as the login widget.)

* **Poster has no details:** add debug: true to PM_config, log in once, and check premagic_user under dev tools → Application → Local Storage. You can only carry forward what the login actually returned