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 Download an Existing Poster from the Dashboard
Follow these steps to download a existing poster from the dashboard: 1. Click Edit Poster for the poster you would like to download. 2. Select the Background widget, then click Change. 3. You'll find a Download option next to the background image. 4. Click Download to save the image to your device.
🖼️ Photo distributionHow 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 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.
🚀 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 add sponsors and watermark to your event!
On Premagic, we give you an option to add sponsors and logos as watermark. Log into app.premagic.com , head over to events, choose the event you want to add sponsors to. Under the event, you'll find a tab called sponsors, click on that. In this Article we will cover the following topics: 1. How to add a sponsor 2. How to add a sponsor Image/Video to the gallery 3. How to add a footer creative 4. How to add a watermark 5. How to add a watermark on Folder Level 1. How to add a sponsor Click on "+ Sponsor" , give the sponsor name and select a category for the sponsor, you can also name the category - for instance: platinum, gold, silver. Once you've selected the category, click on add. You can add more than one sponsors to your event. Kindly note that the created categories will be global, which means any category that is created for a certain event will be available to be used in any other project. 2. How to add a sponsor Image/Video to the gallery You also have an option to add sponsor gallery in between photos, all you have to do is click on "+Add gallery, In between photos Creative" .This option allows you to add a sponsor image/video to your guest gallery, it will show up in between your existing images. After you enter the below details, click on add: - Sponsor: The dropdown for sponsor will only have the names of the sponsors you've already added. - Name: You can give anything that helps you identify the creative when you look at the sponsors report. - Creative Type: We have two options - Image/Video. Once you've selected this you can upload the file at Creative File. - Size: You can choose the size of the image/video that you want to it to be seen in the folder layout - Call-To-Action Link: Please enter a link to whatever call-to-action you choose. It can be contact us, apply now. Please enter a relevant link - Call-To-Action Button Text: From the drop down choose a relevant text. Ex. Contact us. What it would look like: When you click on the image/video, it will open the sponsor image/video along with the action button you choose. When you click on the button it will open the link that you have entered in the form. 3. How to add a footer creative In this section you can add a footer creative. Please fill in the below details: - Sponsor: The dropdown for sponsor will only have the names of the sponsors you've already added. - Name: You can give anything that helps you identify the creative when you look at the sponsors report. - Creative Type: We have two options - Image/Video. Once you've selected this you can upload the file at Creative File. - Size: You can choose the size of the image/video that you want to it to be seen in the folder layout - Call-To-Action Link: Please enter a link to whatever call-to-action you choose. It can be contact us, apply now. Please enter a relevant link You'll find the image/video in the footer of the gallery. When anyone clicks on the image/video it will redirect the page to the link you have mentioned. 4. How to add a watermark Click on Project watermark settings -> Enable Signature album -> click on "+Add Watermark" ->Click on select a file Once you choose a file, you save it. You will see options to adjust the placement and opacity of the watermark. After you’re done selecting, click on add. You can also add padding to watermark Vertical: This signifies the distance in the watermark from top and bottom Horizontal: This signifies the distance in the watermark from left and right 5. How to add a watermark on Folder Level This feature will allow you to choose a different sponsor and watermark for each folder. All you have to do is choose the sponsor and which folder. Please choose a file you would like to upload and click on add. Hope you found this article helpful!