How can we help?
Search for the articles here or browse the categories below.
Browse by topic
Find guides, tutorials, and answers organised by category.
Popular articles
What other people are reading right now.
How to Upload Pictures
You can upload via in 3 ways 1. Desktop app 2. Cloud sync 3. Web app 1. Desktop App Upload 1. Download Premagic Desktop Application from premagic.com/download 2. Login to Desktop App & Upload the photos on the Desktop App. All you have to do is click on 'Choose folder' and drag & drop the folder. You can add the parent folder and all the sub folders will get uploaded automatically. This would roughly take a few minutes depending on the number of pictures uploaded. 3. You will see a green blinker next to the project name in the projects list. This is to indicate that the upload is happening. Once the blinker stops, it means that the upload is complete. Video Guide: 2. Upload using cloud link: We support google drive & dropbox sync 1. Log in to the app.premagic.com → Events → Photos -> select "+import 2. Click on import and paste the Google drive link. The upload time will depend on no. of photos in the link link. Typically should take 10 - 15 mins. 3. Web browser Upload: 1. Log in to the app.premagic.com → Events → select the event -> Photos 2. Click on edit album 3. All you have to do click on ‘choose files’ and drag & drop the folder you want to upload. Note: You cannot upload more than 50 pictures at once from the web app.
🚀 Getting startedHow to Set Up Campaigns
Campaigns turn your attendees, speakers, and sponsors into promoters by giving them a personalized poster and caption to share on social media. This article walks you through setting one up. Step 1: Open your event 1. Go to the “Events” tab in the top navigation bar. 2. Find the event you want to set up a campaign for, and click “View Details." or click on the event. Step 2: Go to Campaigns 3. In the left-hand menu, click “Campaigns.” 4. Click “Get started” to begin creating your first campaign. Step 3: Choose a design Pick a design to start from: • Start with your own design: build a poster from scratch. • Preset templates: ready-made designs like “I'm Attending” or “I'm Speaking” that you can customize. Step 4: Choose who it's for If you chose “Start with your own design,” you'll be asked who the poster is for. Select a category from the dropdown, such as Attendee, Crew, Host, Organizer, Speaker, Sponsor, Partner, Volunteer, Delegate, or Media. Step 5: Design your poster You'll land in the poster editor: • Upload a background image, or use the preset background. • Arrange and edit widgets (Avatar, User name, User role, User company) using the Layers panel on the left and the properties panel on the right. • Set the Event URL before you finish. It's flagged if missing, and it's what allows referral clicks from shared posters to be tracked back to your event. Step 6: Review and deploy Back on the Campaigns page, you'll see your new campaign (e.g., “Attendee”) with the creative you just built. • The creative is flagged “No URL” until the Event URL is added. • Edit the headline text (e.g., “Let Your Network Know You're Attending!”) using “Edit.” • Under Social share message, AI-written messages are on by default, generating a unique caption per attendee to reduce duplicates. Turn this off if you'd rather write a single fixed message, and use “Add message” or “Edit message” to manage the text. ( see How to set up Captions) 5. Click “Deploy” to view different Deployment methods Step 7: Add more campaigns To set up a campaign for a different category (for example, Speaker or Sponsor), click “Create campaign” again and repeat the steps above. Need help? Reach out to your customer success manager or contact support
🚀 Getting startedHow to Create an Event
This article walks you through creating a new event from your dashboard, from starting a blank event to seeing it ready for setup Step 1: Go to the Events tab From the top navigation bar, click “Events.” This takes you to your Events list, where all your existing events are shown. 1. Click the blue “Add Event” button in the top-right corner of the Events page. Step 2: Fill in your event details The Add Event form opens. Fill in the following details: • Event Name (required): give your event a clear name. This will be used in the URLs for the landing pages. • Event Type: choose from Corporate, Conference, Trade Show, Webinar, Awards Ceremony, Membership Event, Internal Event, Leadership Event, or Product Launch. Click “+ Add Type” if none of these fit. • Event Start & End Dates: set the date and time range, and confirm the timezone (click “Change” if it needs adjusting). • Participant Count: enter the number of Attendees (required), plus Speakers, Sponsors, and Exhibitors if applicable. This helps power event insights. • Event Website (optional): paste your event URL to auto-fill details, or add them manually using “+ About Event,” “+ Venue Address,” and “+ Event Hashtags.” Once everything looks right, click “Add Event” at the bottom of the form to save. Step 3: Your event is created You'll land on your new event's Info page, showing the details you just entered. From here, use the left-hand menu to continue setting up your event: • Content: Info, Campaigns, Avatars, Photos, Sessions • People: Attendees, Companies, Sponsors • Admin: Insight, Messages, Import history, Settings For example, head to the Campaigns tab to set up your event poster campaigns. Need help? Reach out to your customer success manager or contact support.
🚀 Getting startedHow to generate QR Code for guest gallery
Premagic lets you generate QR Code files for your guest gallery link as well. 1. Login to your Premagic account using web application - app.premagic.com 2. Go to the Events page and select the concerned event. If the event has not been created, you can create the event using "Add Event" button on Events page - top right corner On the Event page, go to photos tab >> Click on "PRINT QR CODE". Please ensure that the AI Photo delivery is turned on, if not done already. It can be turned on from the same page. Clicking on "PRINT QR CODE" will take you to a new page. All you have to do is - add "?url=" towards the end of the url and click enter to refresh the QR Code. You can get the guest gallery link from photos tab. For further queries, reach out to your dedicated AM or write to us at support@premagic.com.
🚀 Getting startedWidget Troubleshooting Guide
Uncaught Error: Widget didn't find LoaderObject for instance premagic. The loading script was either modified, no call to 'init' method was done or there is conflicting object defined in `window.premagic`. What This Means This error occurs when the Premagic widget's main script loads but cannot find the expected loader setup on the page. The widget uses a two-part loading system: 1. Part 1: A small inline script that creates a queue for early calls 2. Part 2: The main widget script that processes the queue and initializes When Part 2 loads but can't find Part 1's setup, this error is thrown. Troubleshooting Steps Step 1: Verify the Complete Embed Code The widget requires both scripts to be present on the page: ✅ Correct Implementation <!-- Part 1: Inline loader script (must come first) --> <script> (function(w, d, s, o, f, js, fjs) { w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); }; (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]); js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); })(window, document, 'script', 'premagic', 'https://your-cdn.com/premagic-poster-widget.js'); \ premagic('init', { eventId: 'YOUR_EVENT_ID', // ... other config }); </script> <!-- Part 2: Main widget container --> <div id="widget-premagic"></div> ❌ Common Mistake: Only Main Script <!-- Missing the inline loader! --> <script src="https://your-cdn.com/premagic-poster-widget.js"></script> <div id="widget-premagic"></div> Solution: Ensure the customer is using the complete embed code provided in their account dashboard. Step 2: Check for Missing 'init' Call The widget must have at least one init call before or immediately after the script loads. ✅ Correct: Init Call Present <script> // ... loader code ... premagic('init', { eventId: 'abc123', projectId: 'xyz789' }); </script> ❌ Incorrect: No Init Call <script> // ... loader code ... // Missing: premagic('init', {...}); </script> Solution: Add the init call with proper configuration. Step 3: Check for Naming Conflicts Another script on the page might be using window.premagic for something else. Diagnostic Command Ask the customer to open their browser console and run: console.log(window.premagic); console.log(window.premagic?.q); Expected Output // Before widget loads: function() { ... } // Queue function [['init', {...}]] // Array with init call // After widget loads: function(method, ...args) { ... } // Real widget function Problem Output // If something else defined it: { someOtherProperty: 'value' } // Wrong type! undefined // .q doesn't exist Solution: - Remove conflicting scripts - Use a custom instance name if needed (advanced) Step 4: Check for Script Blocking The inline script might be blocked by: 1. Ad Blockers - Ask customer to disable ad blockers temporarily - Check if script loads with ad blocker off 2. Content Security Policy (CSP) - Check browser console for CSP errors - Verify script-src allows inline scripts - Required CSP directives: script-src 'unsafe-inline' 'self' https://your-cdn.com; 3. Browser Extensions - Try in incognito/private mode - Disable browser extensions one by one Solution: Update CSP headers or whitelist the widget domain. Step 5: Verify Load Order The scripts must load in this order: 1. ✅ Inline loader script 2. ✅ premagic('init', ...) call 3. ✅ Main widget script loads (async) 4. ✅ Widget initializes Common Load Order Issues ❌ Init called after main script loads: <script src="widget.js" async></script> <!-- Later in page --> <script> premagic('init', {...}); // Might be too late! </script> ✅ Correct: Init in same block as loader: <script> // Loader code premagic('init', {...}); // Queued before main script loads </script> <script src="widget.js" async></script> Quick Diagnostic Checklist Send this checklist to customers: - [ ] Both inline loader AND main script are present - [ ] premagic('init', {...}) is called with valid config - [ ] No ad blockers are running - [ ] No CSP errors in browser console - [ ] No other scripts use window.premagic - [ ] Widget container exists: <div id="widget-premagic"></div> - [ ] Tested in incognito mode (no extensions) Advanced Solutions Using Custom Instance Names If there's a naming conflict, customers can use a custom instance name: <script> (function(w, d, s, o, f, js, fjs) { w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments); }; // ... loader code ... })(window, document, 'script', 'myCustomWidget', 'https://...'); \ myCustomWidget('init', {...}); // Use custom name </script> Debugging with Console // Check if loader is set up console.log('Loader exists:', typeof window.premagic === 'function'); console.log('Queue exists:', Array.isArray(window.premagic?.q)); console.log('Queue contents:', window.premagic?.q); // Check if widget loaded console.log('Widget loaded:', window['loaded-premagic']); Common Questions Q: Can we load the script dynamically via JavaScript? A: Yes, but ensure the loader is created first: // Create loader first window.premagic = window.premagic || function() { (window.premagic.q = window.premagic.q || []).push(arguments); }; // Call init premagic('init', { eventId: 'abc123' }); // Load main script const script = document.createElement('script'); script.src = 'https://your-cdn.com/premagic-poster-widget.js'; script.async = true; document.head.appendChild(script); Q: Can we use multiple widgets on the same page? A: Yes, use different instance names for each widget (see Advanced Solutions above). Q: Does this work with React/Vue/Angular? A: Yes, but ensure the loader script runs before component mount. Use useEffect (React) or lifecycle hooks to initialize. Getting More Help If none of these solutions work: 1. Check browser console for additional error messages 2. Capture network tab showing script loading 3. Share the page URL (or HTML source) for debugging 4. Contact support with: - Browser/OS version - Console error screenshot - Network tab screenshot - Embed code being used
🏗️ Widget IntegrationIntegrating 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.