# QR Code Element in Page Builder > Learn to add, select, create, and edit QR codes in GHL Customer Care’s Page Builder. Use search, handle deleted/cross‑location QRs, and style for mobile and desktop. - Source: https://docs.ghlcustomercare.com/docs/sites/funnel-and-website-builder/qr-code-element-in-page-builder - Section: Sites / Funnel & Website Builder - Reading time: 2 min - Images: 4, each explained below --- Give visitors a simple way to open any link by scanning a QR code placed directly on your website or funnel page. This article explains how to add and edit QR codes in the GHL Customer Care Page Builder. --- **TABLE OF CONTENTS** - [What is the QR Code Element?](#what-is-the-qr-code-element) - [Key Benefits of QR Code Element](#key-benefits-of-qr-code-element) - [How To Use QR Code Element](#how-to-use-qr-code-element) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What is the QR Code Element?** The QR Code element is an element in the GHL Customer Care Page Builder that renders a scannable code linked to any supported destination URL (for example, a funnel/website page, calendar, form, survey, payment link, or external URL). It lets you select an existing QR from your library or create/edit one inline without leaving the builder. You can place this element anywhere on your page, point it to a destination, and visitors can scan it with their phone camera (or click on it) to go there instantly. --- ## **Key Benefits of QR Code Element** - **Inline Creation/Editing**: Create a new QR or edit the selected one directly from the builder. - **Clear Destination**: See the URL the QR will open, so you can confirm it’s correct before publishing. - **Deleted Detection**: If the previously selected QR was removed from your library, you’re prompted to pick or create a new one. - **Cross‑Location Awareness**: Labels flag QR codes that belong to a different location, preventing confusion. - **On‑Canvas control**: Resize and position the element to fit your layout for desktop and mobile. --- ## **How To Use QR Code Element** Follow these steps to place a working QR on your page, confirm the destination, and publish with confidence. #### **Step 1:** Navigate to Page Open **Sites → Websites (or Funnels)** and choose the page to edit. ![Step 1: Navigate to Page (image 1 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055463621/original/U0D7hwUqEKJguC0rs1110XMKZWJRK7zjgw.png) **Step 1: Navigate to Page (image 1 of 4)** This screenshot appears in the "Step 1: Navigate to Page" section of "QR Code Element in Page Builder". The text alongside this image reads: Open Sites → Websites (or Funnels) and choose the page to edit. Immediately after, the guide continues: Click the + (add elements) icon to open the elements section Scroll down to QR Code and drag the element into the page. - Where to go: Open Sites → Websites (or Funnels) and choose the page to edit. - Controls: Sites → Websites (or Funnels) - Next: Click the + (add elements) icon to open the elements section Scroll down to QR Code and drag the element into the page #### **Step 2:** Add QR Code Element - Click the **+** **(add elements)** icon to open the elements section - Scroll down to QR Code and drag the element into the page ![Step 2: Add QR Code Element (image 2 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055463703/original/iLXZWCQo58XrwQV18mNbne2k6NDovAqdrA.png) **Step 2: Add QR Code Element (image 2 of 4)** This screenshot appears in the "Step 2: Add QR Code Element" section of "QR Code Element in Page Builder". The text alongside this image reads: Click the + (add elements) icon to open the elements section Scroll down to QR Code and drag the element into the page. Immediately after, the guide continues: Use the drop down to select the QR Code you would like to add To create a new QR Code, click the text below the drop down. This will open the QR Code builder. - What to click: Click the + (add elements) icon to open the elements section Scroll down to QR Code and drag the element into the page - Controls: +, (add elements) - Next: Use the drop down to select the QR Code you would like to add To create a new QR Code, click the text below the drop down. This will open the QR Code builder Full procedure: 1. Click the + (add elements) icon to open the elements section 2. Scroll down to QR Code and drag the element into the page #### **Step 3:** Select a QR Code - Use the drop down to select the QR Code you would like to add - To create a new QR Code, click the text below the drop down. This will open the QR Code builder ![Step 3: Select a QR Code (image 3 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055463755/original/JGLqyJoheReL5BwbAnkIdnsl7Vs2gpe7WA.png) **Step 3: Select a QR Code (image 3 of 4)** This screenshot appears in the "Step 3: Select a QR Code" section of "QR Code Element in Page Builder". The text alongside this image reads: Use the drop down to select the QR Code you would like to add To create a new QR Code, click the text below the drop down. This will open the QR Code builder. Immediately after, the guide continues: To edit the QR Code after element has been added, select the element. Click the blue button labeled Edit QR Code. - What to choose: Use the drop down to select the QR Code you would like to add To create a new QR Code, click the text below the drop down. This will open the QR Code builder - Next: To edit the QR Code after element has been added, select the element. Click the blue button labeled Edit QR Code. Full procedure: 1. Use the drop down to select the QR Code you would like to add 2. To create a new QR Code, click the text below the drop down. This will open the QR Code builder #### **Step 4:** Edit QR Code To edit the QR Code after element has been added, select the element. Click the blue button labeled **Edit QR Code**. ![Step 4: Edit QR Code (image 4 of 4)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155055463853/original/P-H7E3OxpJOrUYqS4uLhn-NNduH87zEq7Q.png) **Step 4: Edit QR Code (image 4 of 4)** This screenshot appears in the "Step 4: Edit QR Code" section of "QR Code Element in Page Builder". The text alongside this image reads: To edit the QR Code after element has been added, select the element. Click the blue button labeled Edit QR Code. Immediately after, the guide continues: Q: Where do QR codes live outside the Page Builder? They are stored in your QR library for the current location. You can access and manage them from the QR builder screens and from the inline editor in the element. - What to choose: To edit the QR Code after element has been added, select the element. Click the blue button labeled Edit QR Code. - Controls: Edit QR Code - Next: Q: Where do QR codes live outside the Page Builder? They are stored in your QR library for the current location. You can access and manage them from the QR builder screens and from the inline editor in the element. --- ## **Frequently Asked Questions** **Q: Where do QR codes live outside the Page Builder?** They are stored in your QR library for the current location. You can access and manage them from the QR builder screens and from the inline editor in the element. **Q: Do I need to republish after editing a QR’s destination?** Yes. After updating the QR or swapping the selected QR in the element, publish/update the page so visitors get the latest destination. **Q: What if the QR I previously selected was deleted?** The element will prompt you to pick another QR or create a new one. Choose a replacement and republish. **Q: Can I use a QR from another location?** Cross‑location QRs are flagged for clarity. For consistency and control, create/select a QR owned by the current location. --- ## **Related Articles** - [QR Code Generation and Download Guide](https://docs.ghlcustomercare.com/docs/sites/qr-codes/qr-code-generation-and-download-guide) - [Bulk QR Code Creation](https://docs.ghlcustomercare.com/docs/sites/qr-codes/bulk-qr-code-creation) - [Sites Overview](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) - QR Code Builder Redirect Options --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com