Add a Premagic login widget to your Swoogo registration, then show a personalized poster on the confirmation page.
You need two snippets:
-
Login widget — on the first registration page. It logs the person in and auto-fills the registration form.
-
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 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:
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