Skip to main content
The HoopAI page builder includes a QR code element that lets you embed any QR code from your library directly onto a website or funnel page. Visitors to the page see a scannable code they can point their phone at — without navigating away from the page or opening the QR code library.

​
When to use the page builder QR code element

The QR code element is useful when you want to give desktop or large-screen visitors a way to continue on mobile, access a resource easily, or share a link with someone else. Common scenarios include:
  • A desktop landing page that includes a QR code so mobile users can scan it and continue the experience on their phone
  • A “download our app” section linking to the app store via QR code
  • A contact page with a scannable vCard or business card QR code
  • A resource page with a QR code pointing to a PDF, video, or external tool
  • A confirmation or thank-you page with a QR code for a next step (book an appointment, join a group, save your contact)

​
Adding a QR code element to a page

1

Open the page in the builder

Navigate to Sites > Websites or Sites > Funnels and select the page you want to edit. Click the edit button to open it in the page builder.
2

Add the QR code element

Click the add elements icon (usually a plus sign or a grid icon in the editor toolbar or sidebar). Browse the element list or search for QR Code. Drag the QR Code element onto the page canvas in the desired location.
3

Select a QR code

With the element placed, a dropdown appears in the element settings panel on the right. Select an existing QR code from your library. All codes saved under Sites > QR Codes are available.
4

Create a new code (optional)

If the code you need does not yet exist, click the Create new QR code option below the dropdown. This opens the QR code builder within the page editor. You can create, customize, and save the new code without leaving the builder. Once saved, it is automatically selected in the element.
5

Resize and position

Select the element and use the resize handles to adjust the QR code’s dimensions on the page. Drag the element to reposition it within its section. Use the layout controls to center it, add padding, or adjust its behavior on mobile layouts.
6

Verify the destination

With the element selected, the settings panel shows the current destination URL of the QR code. Confirm it is pointing to the correct page or asset.
7

Publish the page

Click Publish or Save and Publish to make the page live. The QR code element is visible to visitors after publishing.

​
Important behavior notes

​
Destination updates require republishing

If you update the destination of a QR code that is embedded on a published page, the change takes effect in the QR code library immediately. However, the destination URL shown in the page builder element does not update until you republish the page. Republish the page after updating a QR code destination to ensure the page builder reflects the current configuration.

​
Deleted QR codes

If a QR code that is selected in a page element is deleted from the library, the element detects that the code no longer exists and prompts you to select a replacement or create a new one. Open the page in the editor, select a replacement code, and republish.

​
Cross-location QR codes

If a QR code was created in a different location or sub-account, the builder flags it as coming from a different location. The code is still usable, but using a QR code from the same location is recommended for consistency.

​
Editing the QR code from within the builder

You can edit the selected QR code’s destination or design without leaving the page builder:
  1. Click on the QR code element on the canvas
  2. In the settings panel, click Edit QR Code
  3. The QR code editor opens in a modal or side panel
  4. Make your changes, save, and return to the page builder
  5. Republish the page for changes to be visible to visitors

​
Layout and design tips

​
Size

Display the QR code large enough to be easily scannable on a monitor or large screen. A QR code that appears on a desktop page should be at least 150–200 pixels wide in the layout; larger is better. Visitors scanning from arm’s length distance need the code to be clearly visible.

​
Context

Place explanatory text near the QR code. A heading or short sentence telling visitors what the code does — “Scan to save my contact” or “Scan to open this page on your phone” — increases scan rates significantly. Visitors who know what a QR code does are far more likely to scan it.

​
Mobile layout

Consider whether displaying the QR code element makes sense on mobile. On a mobile device, a QR code requiring a second device to scan is less useful than a direct button or link. Use the page builder’s responsive controls to hide the QR code element on mobile and show a direct link button instead, or show both and let visitors choose.

​
Placement

Place the QR code where it naturally fits in the reading flow of the page — near a call to action, at the bottom of a section, or adjacent to the content it relates to. Avoid floating QR codes without context.
Pair the QR code element with a heading that explains the action: “Scan to get this on your phone,” “Scan to join our WhatsApp group,” or “Scan to book your appointment.” Clear calls to action significantly increase scan rates on page-embedded QR codes.
Last modified on March 5, 2026