Blog Details

Wix WhatsApp widget can be added three ways: an HTML iframe embed for the no-code path, a Velo by Wix block for dynamic phone numbers, and a Wix Forms hook that hands leads directly to WhatsApp. Target link: wa.me/966500000000.

1. Wix HTML iframe (no code)

In the Wix Editor, click Add → Embed → HTML iframe. Set width to 60, height to 60, and paste this in the Code panel. Position the iframe at bottom-right of the page, set its z-index high, and untick "Show borders".

<style>html,body{margin:0;padding:0;background:transparent}</style>
<a href="https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt."
   target="_blank" rel="noopener"
   style="display:flex;align-items:center;justify-content:center;
          width:60px;height:60px;border-radius:50%;background:#25D366;
          box-shadow:0 8px 24px rgba(0,0,0,.25);text-decoration:none">
  <svg viewBox="0 0 32 32" width="34" height="34" aria-hidden="true">
    <path fill="#fff" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm5.6 15.2c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.7.7 2.4.8 3.3.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.4z"/>
  </svg>
</a>

Pin the iframe to the bottom-right corner using the Pin to screen option in the Wix Editor so it stays visible on every section.

2. Velo by Wix (dynamic phone per page or dataset)

Enable Dev Mode (Velo). Add a new Custom Element or use a public page with this code. The phone number is read from a Wix dataset called Locations and from a fallback prop:

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(async () => {
    let phone = '966500000000';

    try {
        const { items } = await wixData.query('Locations')
            .eq('isDefault', true).limit(1).find();
        if (items.length && items[0].whatsapp) {
            phone = String(items[0].whatsapp).replace(/\D/g, '');
        }
    } catch (e) { /* keep fallback */ }

    const msg = encodeURIComponent("Hi, I'd like to know more about Wutt.");
    const href = `https://wa.me/${phone}?text=${msg}`;

    const fab = $w('#wuttFab');
    fab.link = href;
    fab.target = '_blank';
    fab.show();
});

Bind #wuttFab to a Wix Button or Text element. Style the button (background #25D366, white text, rounded) in the regular editor.

3. Wix Forms → WhatsApp handoff

Add a Wix Form (e.g. "Get a quote") and an HTML component below it. Inside the HTML component, listen to the form's WixFormsV2 submit event and open WhatsApp with the form data prefilled:

window.addEventListener('message', (event) => {
    if (!event.data || event.data.type !== 'WixFormsV2_Submit') return;
    const f = event.data.payload?.formFields || [];
    const get = (n) => (f.find(x => x.fieldName === n)?.value || '').toString().trim();

    const name  = get('name')   || 'there';
    const email = get('email')  || '';
    const msg   = get('message')|| 'I have a question.';

    const text = encodeURIComponent(
        `Hi, I'm ${name}${email ? ' (' + email + ')' : ''}.\n${msg}`
    );
    const href = `https://wa.me/966500000000?text=${text}`;

    // Open in a new tab so the visitor keeps their form history.
    window.open(href, '_blank', 'noopener');
});

Pair the listener with a server hook (wixForms.onWixFormSubmitted) in Backend → webhooks to also store the submission in a CMS collection and forward it to Wutt via API for follow-up.

Pro tips

• The Wix Editor strips inline event handlers, so wire Velo with $w.onReady and onClick rather than onclick="" attributes.
• For multi-language sites, store the prefilled message in a Wix Multilingual Text object and resolve it with wixWindow.viewerLocale.
• To track attribution in Google Ads, append ?utm_source=ad&utm_medium=cpc to your landing page URLs and use wixWindow.queryParams in Velo.