Integrating Premagic Widgets into Your Event Site
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:
- Root: LLM_GUIDE.md — full integration reference
- React: react/LLM_GUIDE.md
- Angular: angular/LLM_GUIDE.md
- Vue: vue/LLM_GUIDE.md
Just paste the relevant guide into your AI assistant — it has everything needed to generate working integration code.
Need help?
- Issues / feature requests: https://github.com/premagic/example-premagic-poster-widget/issues
- Questions: Reply to this article or contact your Premagic account manager.
