Blog Details

A WhatsApp QR code or chat widget turns a passive website or a printed flyer into a live conversation. Wutt generates short links, QR codes, and embeddable widgets for WordPress, Shopify, and any HTML website. The same link can be used on packaging, in a TV ad, on a restaurant menu, or on a real-estate sign — every scan opens a WhatsApp chat with a prefilled message that lands in the Wutt Inbox, attributed to the source.

What you will build

• A Wutt short link with a prefilled greeting (e.g. “Hi! I am interested in...”).
• A QR code in PNG and SVG that points to that short link.
• A floating chat widget for your website, with optional Arabic/English toggle.
• Source tracking so you know whether the conversation came from the menu, the ad, or the footer.

Step 1 — Create the short link and QR

Go to Short links → New link. Pick the WhatsApp channel, write a prefilled message, choose a slug, and add UTM-style source labels. Wutt returns a short URL like wutt.link/salon-olaya and a downloadable QR.

slug:           salon-olaya
prefill:        "Hi! I would like to book a haircut at Olaya branch."
channel:        whatsapp
sources:        qr_menu, instagram_bio, footer_widget
destination:    +966500000000

Step 2 — Install the widget on WordPress

From Short links → Embed, download the WordPress plugin zip. In your WP admin, go to Plugins → Add new → Upload plugin, choose the zip, and activate. Then go to Settings → Wutt Widget, paste the short link, and pick the position (bottom-right, bottom-left) and the color.

If you prefer not to use a plugin, paste this snippet in your theme’s footer.php right before </body>:

<!-- Wutt WhatsApp chat widget -->
<script async src="https://cdn.wutt.net/widget.js"
        data-link="salon-olaya"
        data-position="bottom-right"
        data-color="#0aa97a"
        data-locale="en"></script>

Step 3 — Install the widget on Shopify

From Short links → Embed, download the Shopify app zip (or use the direct theme snippet). In Shopify admin, go to Online Store → Themes → Customize → Theme settings → Custom CSS / App embeds, add a new app embed, enable Wutt widget, paste your short link slug, and save.

If your theme does not support app embeds, edit theme.liquid:

<!-- Wutt widget for Shopify -->
<script async src="https://cdn.wutt.net/widget.js"
        data-link="shop-sneakers"
        data-position="bottom-right"
        data-color="#111111"
        data-locale="{{ request.locale.iso_code }}"></script>
</body>

Step 4 — Install the widget on any other website

Drop the same one-line script in your site’s </body>:

<script async src="https://cdn.wutt.net/widget.js"
        data-link="wutt-link-slug"
        data-position="bottom-right"
        data-color="#0aa97a"
        data-locale="auto"></script>

Set data-locale="auto" to detect the visitor’s browser language and switch between Arabic and English automatically.

Step 5 — Use scan-and-chat QR codes on physical surfaces

Download the PNG (300 DPI for print) and place the QR on:

• Restaurant tables, delivery packaging, and takeaway bags.
• Salon mirrors, clinic reception desks, and gym walls.
• Real-estate yard signs, car window stickers, and product boxes.
• Flyers, brochures, business cards, and invoices.

Each QR can carry a different slug so the source is tracked. Wutt counts scans and resulting conversations per slug.

Step 6 — Track results

Open Reports → Short links. You will see scans, conversations started, and conversion-to-booking or conversion-to-order for every slug. Use this to decide whether the menu QR is worth the print run.

Best practices

• Keep the prefilled message under 80 characters so it shows fully in the WhatsApp composer.
• Test the QR with three different phone cameras before a 10,000-print run.
• Use a separate slug per channel (qr_menu, footer, instagram_bio) for clean attribution.
• For Arabic-speaking audiences, set the widget to data-locale="ar" or "auto".