# QR code

<figure><img src="/files/GjcI6cb5rlnCCNPgfmEk" alt=""><figcaption></figcaption></figure>

The **QR Code** is a media element that automatically generates a scannable code based on your chosen content. It’s perfect for:

* Linking to your store’s mobile app or product page
* Sharing discount codes or promo pages
* Providing contact info or event details
* Encouraging mobile-only offers

## How to add a QR code element

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Media** > **QR code** or in **Quick add**, select **QR code** element.

<img src="/files/AXlbAGZdRklszPrL8Lg7" alt="" data-size="original"><img src="/files/cmCOVBDAJ3gMNKhbc2rc" alt="" data-size="original">

3. Drag the element onto your canvas.
   {% endhint %}

## How to edit a QR code element

Once you've added the element, you can customize it to match your design.

### General settings

<figure><img src="/files/72NjXTe5eEszcvuetu3j" alt=""><figcaption></figcaption></figure>

* **Content type:** Choose what the QR code will link to:
  * **Link**: Add a website or store URL
  * **Text**: Display plain text like a coupon code
  * **Email**: Launch an email app with prefilled address and subject
  * **Phone**: Dial a phone number directly
  * **WhatsApp**: Opens a WhatsApp chat with prefilled message (great for support or sales!).
* **Content field:** Enter the destination.
* **Logo (optional):** Upload a small logo to appear in the center of your QR code (keep it simple for best scanning).
* **Margin size**: Adjust the margin (spacing) around the QR code block.

## 💬 Best Practices & Tips

✅ **Test it before publishing!** Always scan the code on your mobile to verify functionality.

✅ **Use WhatsApp for direct support** — it’s fast, mobile-friendly, and familiar to most shoppers.

✅ **Shorten URLs** for cleaner QR rendering (use a service like bit.ly if needed).

❌ **Don’t overcrowd your design**. Keep the surrounding space clean so users can easily scan.

🎯 **Where to place it?**

* Homepage or landing banners
* Contact section (for WhatsApp/Email)
* Popup offers (e.g. QR = coupon)
* On mobile-exclusive promotions


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/qr-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.