Home Widget Integration Integrating Premagic Widgets into Your Event Site

Integrating Premagic Widgets into Your Event Site

Last updated on May 11, 2026

Premagic offers three drop-in features that boost attendee engagement and help you measure ROI on advocate-driven ticket sales. This guide walks you through integrating them using our open-source sample apps.

What you get

  • LoginWidget — LinkedIn "Quick Register" button + automatic form autofill. Place it on your registration / sign-up page.

  • PosterWidget — Personalised attendee poster creator + social sharing. Place it on your success / confirmation page.

  • Advocate Revenue Tracking — Attribute ticket sales to the advocate who shared the poster. Place it on your checkout / payment success page.

Sample apps

We maintain a public sample repo with complete, runnable apps for the three most common frameworks:

Repo: https://github.com/premagic/example-premagic-poster-widget

  • React 18 — folder react/ — cd react && npm install && npm start

  • Angular 17+ — folder angular/ — cd angular && npm install && npm start

  • Vue 3 — folder vue/ — cd vue && npm install && npm run dev

Each sample contains a 4-page flow (Home → Register → Success → Profile) so you can see every widget in context.

Step 1 — Add the tracking scripts

Add these two tags to the <head> of every page of your site. They are required for all three features.

<link rel="preload"
      href="https://asts.premagic.com/s/poster-widget/premagic-poster-widget.js"
      as="script" crossorigin="anonymous" />
<script src="https://asts.premagic.com/s/poster-conversion-tracker/ptm.js"></script>

Step 2 — Configure your shareId

All you need is your Premagic share ID:

const premagicConfig = {
  shareId: "YOUR_SHARE_ID"   // Required
};

Note: projectId, eventId, websiteId, and domain have all been removed. Do not include them.

Step 3 — Drop the widgets into your pages

LoginWidget — on your registration page

import LoginWidget from './premagic-widgets/LoginWidget';

function RegistrationPage() {
  return (
    <div>
      <h1>Register</h1>
      <LoginWidget config={{ shareId: "YOUR_SHARE_ID" }} />
      {/* Your registration form below */}
    </div>
  );
}

The LoginWidget will autofill name, email, company and job title from the user's LinkedIn profile.

PosterWidget — on your success page

import PosterWidget from './premagic-widgets/PosterWidget';

function SuccessPage() {
  return (
    <div>
      <h1>Registration Successful!</h1>
      <PosterWidget config={{ shareId: "YOUR_SHARE_ID" }} />
    </div>
  );
}

Equivalent Angular and Vue components are in the corresponding folders.

Step 4 (optional) — Track revenue from poster shares

When someone clicks an advocate's shared poster link and later completes a purchase, call trackPurchase on your checkout success page so we can attribute the sale:

window.AdvocateTracking.trackPurchase({
  orderId: '12345',      // Your unique order ID
  orderCount: 2,         // Number of tickets / items
  value: 100.00,         // Total value (number, no currency symbol)
  currency: 'USD'        // ISO 4217 (USD, EUR, GBP, EGP, …)
});

This is plain JavaScript — no framework wrapper required. Calls from non-referred purchases are safely ignored.

Already have user data? Skip the LinkedIn login

For attendee profile pages, post-purchase confirmation, or exhibitor dashboards where the user is already logged into your system, pass prefillData to the PosterWidget to go straight to poster creation:

const premagicConfig = {
  shareId: "YOUR_SHARE_ID",
  prefillData: {
    externalId: "ext_12345",
    userName: "John Doe",
    userTitle: "Senior Developer",
    userCompany: "Acme Corp",
    userPhoto: "https://example.com/photo.jpg",
    email: "john@example.com",
    phone: "+1234567890",
    registrationId: "reg_12345",
    sessionTitle: "Conference 2025",
    exhibitorLogo: "https://example.com/logo.jpg",
    exhibitorBoothNumber: "101"
  }
};

All prefillData fields are optional — pass only what you have. Each sample app includes a /profile page demonstrating this pattern.

Important notes

  • Container ID must be widget-premagic — both widgets render into <div id="widget-premagic"></div>.

  • Always call cleanup — call unmountWidget() on component unmount/destroy to prevent memory leaks. The sample components do this for you.

  • Framework form autofill needs polling. React, Angular and Vue do not detect programmatic DOM .value changes. To capture autofilled data on form submit, poll the inputs every 500 ms and sync them into your form state. See the autofill sync section in LLM_GUIDE.md for the exact pattern.

Working with AI assistants (Cursor, Copilot, ChatGPT, Windsurf, Codex)

The repo includes ready-to-feed integration guides for AI coding assistants:

Just paste the relevant guide into your AI assistant — it has everything needed to generate working integration code.

Need help?