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:** * **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 `` of **every page** of your site. They are required for all three features. ``` ``` ## **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 (

Register

{/* Your registration form below */}

); } ``` 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 (

Registration Successful!

); } ``` 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 ``. * **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`](https://github.com/premagic/example-premagic-poster-widget/blob/master/LLM_GUIDE.md) — full integration reference * React: [`react/LLM_GUIDE.md`](https://github.com/premagic/example-premagic-poster-widget/blob/master/react/LLM_GUIDE.md) * Angular: [`angular/LLM_GUIDE.md`](https://github.com/premagic/example-premagic-poster-widget/blob/master/angular/LLM_GUIDE.md) * Vue: [`vue/LLM_GUIDE.md`](https://github.com/premagic/example-premagic-poster-widget/blob/master/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:** * **Questions:** Reply to this article or contact your Premagic account manager.