feat: add WhatsApp contact button for customer support
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:
parent
4199fd8a4a
commit
583b3c3f9e
69
app/components/WhatsAppButton.jsx
Normal file
69
app/components/WhatsAppButton.jsx
Normal 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 };
|
||||||
@ -44,6 +44,7 @@ import { AppProvider } from "@shopify/shopify-app-remix/react";
|
|||||||
import { NavMenu } from "@shopify/app-bridge-react";
|
import { NavMenu } from "@shopify/app-bridge-react";
|
||||||
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
||||||
import { authenticate } from "../shopify.server";
|
import { authenticate } from "../shopify.server";
|
||||||
|
import { WhatsAppFloatingButton } from "../components/WhatsAppButton";
|
||||||
|
|
||||||
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
||||||
|
|
||||||
@ -66,6 +67,7 @@ export default function App() {
|
|||||||
{/* <Link to="/app/testing">🆘 Testing</Link> */}
|
{/* <Link to="/app/testing">🆘 Testing</Link> */}
|
||||||
</NavMenu>
|
</NavMenu>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
<WhatsAppFloatingButton />
|
||||||
</AppProvider>
|
</AppProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user