The Graphic Widget Manual
Supporters visit a page on your website, add their name and photo to your designs, and share them everywhere. This manual is the whole thing: putting it on your website, feeding it designs from Canva, and fixing the three things that ever go wrong. Plain English throughout. Nothing in here can break your website.
- Put the widget on your website — once, or whenever you move sites
- Set up the admin page — once
- Hook up Canva — once, ever
- Build the multi-size Canva design — per design
- Publish a design — the everyday routine
- If something looks wrong
- Optional extras
1Put the widget on your website
The widget is one self-contained file. Any website that lets you paste code can host it — and it comes with you if you ever change platforms.
Get the widget file
Michelle gives you a file called raman-graphic-widget.html. Open it in any text editor (Notepad is fine), select all, copy. You're copying the entire file — it's supposed to be long.
Paste it into a page
On Squarespace: edit the page → click + Add block → choose Code → paste everything → Save.
On anything else: same idea, different name for the block — WordPress calls it Custom HTML, Wix calls it Embed HTML, Webflow calls it Embed. If your site can paste code, it can host the widget.
Look at the page
The widget appears right there: template picker, name box, photo upload, share buttons. It keeps its own styling and won't fight with your site's fonts or colors.
Design changes never touch this page again — they publish through the admin page (Chapter 5). The only time you re-paste this file is when Michelle sends you an updated version of the widget itself.
2Set up the admin page
The admin page is your control room: templates, colors, captions, hashtags, and the Canva buttons all live there.
Put admin.html somewhere private
Two good options — pick either:
A. A hidden page on your website. Make a page that isn't in any menu, turn on Squarespace's page password, and paste admin.html into a Code block there (same move as Chapter 1).
B. Just open the file. Keep admin.html on a staffer's computer and double-click it. It opens in the browser and works exactly the same.
Type the passphrase — once
The bar at the very bottom has a password box. Type the passphrase Michelle gave you, and tick the little remember box next to it — that computer won't ask again.
Only tick “remember” on campaign computers, not shared or public ones.
Know the one habit: it saves itself
Every change you make — text, colors, pulled art — publishes itself a few seconds after you stop. Watch the bottom corner: “Autosaving…” then Saved ✓ (live). The Save & publish button is just the “do it right now” option.
3Hook up Canva (one time, ever)
This lets the Pull buttons fetch finished art straight out of your Canva — no exporting, no downloading, no uploading.
- A 15-minute call with Michelle happens first — she wires the tool to your Canva account with you on the phone. She'll tell you when you're ready.
- You need the campaign's Canva login (the shared Canva Pro account, not a personal one).
Open the admin page and click Connect to Canva
It's the box at the very top, called “Canva connection.” A new Canva tab opens. (Passphrase must be typed in the bottom bar first — but you ticked “remember,” so it already is.)
Log in as the campaign — then click Allow
In the Canva tab, check the little profile circle (top right) says the campaign's account. Canva asks if the widget may read designs. Click Allow.
You land back on the admin page
The tab brings you straight back, with Connected ✓ in the Canva connection box. That's it — it stays connected on its own from now on.
Chapters 1–3 never happen again. Everything from here is the fun part.
4Build the multi-size Canva design
One Canva design, one page per size. Canva lets pages in the same design be different sizes — that's the trick that makes Pull work.
Start the design at the first size
In Canva: Create a design → Custom size → type 1080 × 1080. That first page is your Instagram post.
Add a page for each size you want
At the bottom of the editor, click ＋ Add page and choose Add page type → Custom size, then type the next size from the chart below. Repeat until you have a page per size.
Keep a mental note (or rename the pages): which page number is which size. You'll pick those numbers from a dropdown in Chapter 5. And you don't have to make every size — sizes you skip simply use the widget's built-in look.
The supported sizes
These are the six the widget offers supporters. Boxes below are drawn to scale:
The one design rule: leave a real hole for the photo
On every page, the spot where the supporter's photo goes must be genuinely see-through — Canva shows a gray checkerboard there. Delete any placeholder shape. A white box is not a hole; the photo will hide behind it.
Bake everything else into the page: your art, the headline, the logo. The widget adds only two things on top of your design — the supporter's photo (in the hole) and their name.
Michelle can give you a starter file with the pages already sized and holes already cut — copy it and redecorate.
5Publish a design
The everyday routine. Design in Canva → Pull → Place photo. Done. Maybe four minutes, most of which is the Pull thinking.
Copy the design's link
With the design open in Canva, click Share → Copy link — or just copy the web address from the top of your browser. Short canva.link addresses and long canva.com/design/… ones both work. Paste the whole thing.
Paste it into the template
On the admin page, click the template you're updating to expand it, open “Canva art (advanced)”, and paste into “Canva design link.”
Each size: pick the page, click Pull
Every size is one line: the size's name, a page dropdown, and Pull. Pick which of your Canva pages holds that size, click Pull, and when it finishes the tag at the end of the line flips to art ✓.
Pulling takes up to a minute per size — the status message at the bottom narrates. Redesigned something later? Just Pull that size again.
Click Place photo and drag the box over the hole
Same line, next button. Your art opens with a purple box — drag it over the see-through hole, drag the corner to resize, click Use this placement. There's a shape button if the hole is a circle.
Keep the dashed teal area clear — the supporter's name prints there.
Watch for Saved ✓ (live), then look at the website
Autosave publishes it within seconds. Open the supporter page, pick your template, click through the sizes. If it looks right to you, it looks right to everyone.
6If something looks wrong
Every one of these is fixable in under a minute.
- “Wrong passphrase”
- Retype it in the bottom bar — no spaces before or after. Still stuck? Ask Michelle.
- “Not connected” / Pull says to connect first
- Redo Chapter 3. It takes two minutes. (Happens if the Canva password changed or access was revoked.)
- Connected with the wrong Canva account
- Click Connect to Canva again, log into the right account this time, click Allow. The new connection completely replaces the old one.
- Pull fails or takes forever
- Wait a moment, click Pull once more. Twice in a row? Copy the exact error message and send it to Michelle.
- The supporter's photo doesn't show — there's a blank box instead
- That Canva page has a shape covering the hole (Chapter 4's rule). Delete the shape in Canva, Pull that size again — autosave does the rest.
- A design looks squished or stretched on one size
- That size's page dropdown points at a page with different dimensions. Pick the right page and Pull again.
- I pulled but the website looks the same
- Wait for Saved ✓ (live) in the bottom corner, then hard-refresh the website (Ctrl+Shift+R, or Cmd+Shift+R on Mac). Still old after a few minutes? Tell Michelle.
7Optional extras
Not included in the base tool — ask Michelle if you want either.
The numbers dashboard
See how many graphics supporters made, which designs they love, and where they share. The counting already happens — this adds the pretty screen.
The “what people are sharing” wall
A live grid of supporter-made graphics you can drop on any page. Very good energy for GOTV week.