Arabic (RTL) WhatsApp chat button
A WhatsApp button for right-to-left Arabic sites, with copy-paste HTML and CSS.
FreeRuns in your browserNo signupUpdated 2026-11-05
Your Arabic pages need dir="rtl" on the html tag for the logical version to land on the correct side.
Number
971501234567
7 to 15 digits, international format
Placement
Left
Left on Arabic pages, right on English pages
Preview on an Arabic page
<a href="https://wa.me/971501234567?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D9%84%D8%AF%D9%8A%20%D8%A7%D8%B3%D8%AA%D9%81%D8%B3%D8%A7%D8%B1%20%D8%B9%D9%86%20%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%D9%83%D9%85." class="wa-chat-rtl" lang="ar" target="_blank" rel="noopener" aria-label="تواصل معنا عبر واتساب">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.6.7.7-2.5-.2-.4A8 8 0 0 1 12 4Zm-3 4.3c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.6s1.1 3 1.3 3.2c.2.2 2.2 3.4 5.4 4.6 2.6 1 3.2.8 3.7.8.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.4l-2.1-1c-.3-.1-.5-.2-.7.2l-1 1.2c-.2.2-.4.2-.7.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.6l.5-.6.3-.5V11l-.9-2.3c-.3-.6-.5-.5-.7-.5h-.6Z"/></svg>
<span>تواصل معنا عبر واتساب</span>
</a>
<style>
.wa-chat-rtl{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:9999;display:inline-flex;align-items:center;gap:10px;padding-block:12px;padding-inline:14px 18px;border-radius:999px;background:#25d366;color:#fff;font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:normal;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .15s}
.wa-chat-rtl:hover{transform:translateY(-2px)}
.wa-chat-rtl svg{width:26px;height:26px;fill:currentColor;flex:none}
@media (max-width:640px){.wa-chat-rtl span{display:none}.wa-chat-rtl{padding:14px}}
</style>The WhatsApp logo is not mirrored for right-to-left pages; brand marks keep their usual orientation. Only the button's position and the order of icon and text follow the page direction.
About this tool
How it works and how to read the result.
Need this done for you?
Arabic & multilingual websites
English and Arabic websites with proper right-to-left layouts.
See the serviceWhat it does
This generator writes a floating WhatsApp button for Arabic and other right-to-left websites. It uses WhatsApp's click-to-chat link format, with your number and an optional Arabic message, and wraps it in HTML and CSS you paste once before the closing body tag.
It differs from a standard chat button in four ways. The label and message default to Arabic, and the link is marked lang="ar" for screen readers. The position uses logical CSS (inset-inline-end), so the same snippet sits bottom-left on Arabic pages and bottom-right on English pages of a bilingual site. Padding uses padding-inline, so the space around the icon flips too. And letter spacing is reset to normal, because spacing Arabic letters apart breaks the joins between them.
How to use it
- Enter your WhatsApp number with the country code.
- Write the opening message and button text in Arabic, or keep the defaults.
- Choose the side on Arabic pages. Leave "Flip sides on English pages" on for bilingual sites.
- Pick "Use the page's font" to match your site, or Arabic system fonts as a fallback.
- Copy the snippet into your site just before
</body>, then test the link.
How to read the result
The preview shows the button on a mock Arabic page with dir="rtl". With logical CSS on, the "Placement" stat reads "Left on Arabic pages, right on English pages". That depends on your Arabic pages having <html dir="rtl">; without it, the browser treats the page as left to right and the button lands on the other side. The hreflang generator helps once your Arabic and English pages are linked.
If you turn logical CSS off, the snippet uses plain left or right and adds dir="rtl" to the button, so it stays put whatever the page direction.
On phones the text label hides and the button becomes a round icon, which keeps it from covering content. The pre-filled message is a starting point; customers can edit or delete it before sending.
For the English version of the button, use the WhatsApp chat button generator. Building the whole site in Arabic and English, with proper right-to-left layouts and typography, is our Arabic and multilingual website service.
Questions
Frequently asked.
Which side should the button sit on an Arabic page?
On a right-to-left page, the mirror of the usual bottom-right position is bottom-left, and that is the default here. Some Arabic sites keep it on the right to match other chat widgets. Either works; what matters is that it doesn't cover the page's main button or the cookie banner.
Should the WhatsApp logo be mirrored for Arabic?
No. Logos and brand marks keep their normal orientation in right-to-left layouts. Only things that show direction, such as arrows for next and back, are mirrored. The button's position and the order of icon and text follow the page direction; the logo itself does not flip.
Will the Arabic pre-filled message work in the link?
Yes. The message is percent-encoded into the wa.me link, so Arabic letters travel safely and appear correctly in WhatsApp's compose box. The link looks long and unreadable in the code, which is expected.
More in Links & embeds
Related tools.
- Social share link generatorShare URLs for X, LinkedIn, Facebook, WhatsApp, Telegram and email.
- WhatsApp QR code generatorA QR code that opens a WhatsApp chat with your number and a message.
- WhatsApp message template builderWrite WhatsApp Business templates with variables and check them against the format rules.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide