Help desk

Premagic Widget Setup in Swoogo

Open in
View as Markdown Open in ChatGPT Open in Claude
M

Meghana

Last updated on Aug 28, 2026

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

You need four snippets:

Snippets 1 and 2 needs to be replicated for each event.

  1. Login widget — on the first registration page. It logs the person in and auto-fills the registration form, helps create prefilled posters.

  2. Poster widget — on the confirmation page. It shows a poster personalised for the person.

  3. Installing Premagic Conversion tracker - Track registrations from advocacy posters

  4. Triggering the Premagic Conversion tracker - Track successful purchases

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 need to create a snippet for each event, 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:

<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.

Snippet 3 — Premagic Conversion tracker

This snippet needs to be created only once in your account. But added to each event. Code position: Head of Page

  1. Create a JS Snippet called "Premagic conversion tracker - Common"

  2. with Code positions as Head of Page

  3. Add the below code to the HTML box

<script src="https://asts.premagic.com/s/poster-conversion-tracker/ptm.js"></script>

Installing the conversion tracker

  1. In the website builder, take Tools & Analytics

  2. Choose Javascript Snippets

  3. Select the widget "Premagic conversion tracker - Common" to load on all pages

4. Snippet 3 — Firing the Premagic Conversion tracker

This snippet needs to be created only once in your account. But added to each event.

  1. Create a JS Snippet called "Premagic conversion tracker Trigger - Common"

  2. with Code positions as Snippet Widget

  3. Below is the code that goes into JS Box

(function () {
  const started = Date.now();

  const tick = setInterval(() => {
    const rows = document.querySelectorAll('.swoogo-reg-summary tbody tr');
    const ready = window.AdvocateTracking
      && typeof window.AdvocateTracking.trackPurchase === 'function'
      && rows.length > 0;

    if (!ready) {
      if (Date.now() - started > 15000) clearInterval(tick); // give up after 15s
      return;
    }

    clearInterval(tick);

    let value = 0;
    rows.forEach(row => {
      const cells = [...row.querySelectorAll('td')].reverse();
      const priceCell = cells.find(td => /^[^\d]{0,3}[\d.,]+$/.test(td.textContent.trim()));
      value += parseFloat((priceCell ? priceCell.textContent : '0').replace(/[^\d.]/g, '')) || 0;
    });

    window.AdvocateTracking.trackPurchase({
      orderId: new URLSearchParams(location.search).get('i'),
      orderCount: rows.length,
      value: value,
      currency: 'USD'
    });
  }, 300);
})();
  1. Install this widget on your confirmation / success page.

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