admin/Data4Autos-Shopify-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add WhatsApp contact button for customer support

Browse Source 
Adds a reusable WhatsAppButton component (wa.me link to
+16476797651) and renders it as a floating action button on every
app page so customers/merchants can reach support instantly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
MOHAN 2026-08-22 01:26:29 +05:30
parent 4199fd8a4a
commit 583b3c3f9e
2 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/components/WhatsAppButton.jsx Normal file
View File

@ -0,0 +1,69 @@
import { Button } from '@shopify/polaris';
const WHATSAPP_NUMBER = '+16476797651';
const WHATSAPP_NUMBER_DIALED = WHATSAPP_NUMBER.replace(/[^\d]/g, '');
export function getWhatsAppLink(message) {
const base = `https://wa.me/${WHATSAPP_NUMBER_DIALED}`;
return message ? `${base}?text=${encodeURIComponent(message)}` : base;
}
const WhatsAppIcon = () => (
<svg
viewBox="0 0 32 32"
width="18"
height="18"
fill="currentColor"
aria-hidden="true"
focusable="false"
>
<path d="M16.004 0C7.166 0 0 7.163 0 16c0 2.82.744 5.554 2.156 7.965L0 32l8.24-2.13A15.93 15.93 0 0 0 16.004 32C24.84 32 32 24.837 32 16S24.84 0 16.004 0zm0 29.235c-2.6 0-5.14-.7-7.35-2.02l-.527-.312-4.89 1.264 1.31-4.77-.343-.49A13.19 13.19 0 0 1 2.77 16c0-7.31 5.95-13.235 13.234-13.235S29.238 8.69 29.238 16 23.288 29.235 16.004 29.235zm7.24-9.905c-.397-.198-2.35-1.16-2.714-1.293-.364-.133-.63-.198-.894.198-.264.397-1.026 1.293-1.258 1.558-.232.264-.463.298-.86.1-.397-.198-1.677-.618-3.195-1.972-1.18-1.053-1.977-2.353-2.209-2.75-.232-.397-.025-.612.173-.81.178-.177.397-.463.596-.694.198-.232.264-.397.397-.662.132-.264.066-.496-.033-.694-.1-.198-.893-2.155-1.224-2.95-.322-.774-.65-.67-.893-.682l-.762-.013c-.264 0-.694.099-1.058.496-.364.397-1.388 1.356-1.388 3.306 0 1.95 1.421 3.834 1.62 4.1.198.264 2.797 4.27 6.78 5.987.947.409 1.686.653 2.263.836.951.303 1.816.26 2.5.158.763-.114 2.35-.96 2.681-1.888.331-.926.331-1.72.232-1.887-.1-.166-.364-.264-.762-.462z"/>
</svg>
);
export default function WhatsAppButton({ message, label = 'Chat on WhatsApp', size, fullWidth }) {
return (
<Button
url={getWhatsAppLink(message)}
external
icon={WhatsAppIcon}
size={size}
fullWidth={fullWidth}
>
{label}
</Button>
);
}
export function WhatsAppFloatingButton() {
return (
<a
href={getWhatsAppLink("Hi! I'd like help with Data4Autos.")}
target="_blank"
rel="noopener noreferrer"
aria-label="Contact us on WhatsApp"
title={`WhatsApp: ${WHATSAPP_NUMBER}`}
style={{
position: 'fixed',
bottom: '24px',
right: '24px',
width: '56px',
height: '56px',
borderRadius: '50%',
background: '#25D366',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
zIndex: 1000,
color: '#fff',
}}
>
<svg viewBox="0 0 32 32" width="30" height="30" fill="currentColor" aria-hidden="true">
<path d="M16.004 0C7.166 0 0 7.163 0 16c0 2.82.744 5.554 2.156 7.965L0 32l8.24-2.13A15.93 15.93 0 0 0 16.004 32C24.84 32 32 24.837 32 16S24.84 0 16.004 0zm0 29.235c-2.6 0-5.14-.7-7.35-2.02l-.527-.312-4.89 1.264 1.31-4.77-.343-.49A13.19 13.19 0 0 1 2.77 16c0-7.31 5.95-13.235 13.234-13.235S29.238 8.69 29.238 16 23.288 29.235 16.004 29.235zm7.24-9.905c-.397-.198-2.35-1.16-2.714-1.293-.364-.133-.63-.198-.894.198-.264.397-1.026 1.293-1.258 1.558-.232.264-.463.298-.86.1-.397-.198-1.677-.618-3.195-1.972-1.18-1.053-1.977-2.353-2.209-2.75-.232-.397-.025-.612.173-.81.178-.177.397-.463.596-.694.198-.232.264-.397.397-.662.132-.264.066-.496-.033-.694-.1-.198-.893-2.155-1.224-2.95-.322-.774-.65-.67-.893-.682l-.762-.013c-.264 0-.694.099-1.058.496-.364.397-1.388 1.356-1.388 3.306 0 1.95 1.421 3.834 1.62 4.1.198.264 2.797 4.27 6.78 5.987.947.409 1.686.653 2.263.836.951.303 1.816.26 2.5.158.763-.114 2.35-.96 2.681-1.888.331-.926.331-1.72.232-1.887-.1-.166-.364-.264-.762-.462z"/>
</svg>
</a>
);
}
export { WHATSAPP_NUMBER };

2
app/routes/app.jsx
View File

@ -44,6 +44,7 @@ import { AppProvider } from "@shopify/shopify-app-remix/react";
import { NavMenu } from "@shopify/app-bridge-react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";
import { WhatsAppFloatingButton } from "../components/WhatsAppButton";
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
@ -66,6 +67,7 @@ export default function App() {
{/* <Link to="/app/testing">🆘 Testing</Link> */}
</NavMenu>
<Outlet />
<WhatsAppFloatingButton />
</AppProvider>
);
}