https://app.snapto.ai/assets/WhatsAppWidgetGuide-DOVGtEzb.js

1import{p as e,L as r,T as l,a3 as d,bP as p,bQ as a,b4 as c,b9 as h}from"./index-C9IH3k-2.js";import{I as s}from"./TemplateUtil-D1DzmWLm.js";import{S as u}from"./index-DcM_eZHc.js";import{F as m}from"./Table-isZ0WXp4.js";import"./Wrapper-ChjuDa3w.js";import"./HelperMethods-C-ewwU_x.js";import"./index-BOwvFOZJ.js";import"./Pagination-D1z-xPUv.js";import"./HolderOutlined-YOHjCGKZ.js";const{Title:x,Text:t,Paragraph:o}=l,n=({children:i})=>e.jsx(o,{children:e.jsx("pre",{children:i})}),y=[{key:"1",option:"Phone",dataAttribute:"data-phone",example:'"919876543210"',description:"(Required) WhatsApp number with country code"},{key:"2",option:"Text",dataAttribute:"data-text",example:'"Hi, I need help"',description:"Pre-filled message when user clicks the button"},{key:"3",option:"Position",dataAttribute:"data-position",example:'"left" or "right"',description:'Button position on screen (default: "right")'},{key:"4",option:"Bottom",dataAttribute:"data-bottom",example:'"24"',description:'Distance from bottom in pixels (default: "24")'},{key:"5",option:"Side",dataAttribute:"data-side",example:'"24"',description:'Distance from left/right edge in pixels (default: "24")'},{key:"6",option:"Color",dataAttribute:"data-color",example:'"#25D366"',description:'Button background color (default: "#25D366")'},{key:"7",option:"Size",dataAttribute:"data-size",example:'"60"',description:'Button size in pixels (default: "60")'},{key:"8",option:"Icon URL",dataAttribute:"data-icon-url",example:'"https://..."',description:"Custom icon image URL (optional)"}],b=[{title:"Option",dataIndex:"option",key:"option",render:i=>e.jsx(t,{strong:!0,children:i})},{title:"Data Attribute",dataIndex:"dataAttribute",key:"dataAttribute",render:i=>e.jsx(t,{code:!0,children:i})},{title:"Example",dataIndex:"example",key:"example",render:i=>e.jsx(t,{code:!0,children:i})},{title:"Description",dataIndex:"description",key:"description"}],R=()=>e.jsxs(r,{vertical:!0,gap:24,children:[e.jsx(l.Title,{level:4,style:{margin:0},children:"WhatsApp Widget"}),e.jsx(s,{size:"small",children:e.jsxs(r,{gap:24,align:"center",wrap:!0,children:[e.jsx(d,{src:p.WHATSAPP_WIDGET_DEMO_IMG,alt:"WhatsApp Widget Demo",width:340}),e.jsxs(r,{vertical:!0,gap:8,flex:1,children:[e.jsx(x,{level:4,style:{margin:0},children:"Add a WhatsApp chat button to your website"}),e.jsx(t,{style:{margin:0},children:"Add a floating WhatsApp button to your website so visitors can message you instantly. It redirects users to your WhatsApp number directly with an optional pre-filled message, making it easy for customers to start a conversation."})]})]})}),e.jsx(s,{title:"Quick Start - 3 Simple Steps",size:"small",children:e.jsx(u,{orientation:"vertical",current:-1,items:[{title:e.jsx(t,{strong:!0,children:"Get your WhatsApp number ready"}),description:e.jsxs(r,{vertical:!0,gap:4,children:[e.jsx(t,{children:"Format your phone number with country code, without + or spaces."}),e.jsxs(t,{children:["Example: ",e.jsx(t,{code:!0,children:"919876543210"})," (India: 91 + phone number)"]})]})},{title:e.jsx(t,{strong:!0,children:"Copy the code below"}),description:e.jsxs(r,{vertical:!0,gap:8,children:[e.jsx(t,{children:"Replace the phone number with your own WhatsApp number:"}),e.jsx(n,{children:`<script async src="${a}" data-phone="YOUR_PHONE_NUMBER"><\/script>`})]})},{title:e.jsx(t,{strong:!0,children:"Paste before body tag"}),description:e.jsxs(t,{children:["Open your website's HTML file and paste the code just before the closing ",e.jsx(t,{code:!0,children:"body"})," tag."]})}]})}),e.jsxs(s,{title:"Phone Number Format",size:"small",children:[e.jsx(o,{children:"Use country code without + symbol or spaces:"}),e.jsxs(r,{vertical:!0,gap:8,children:[e.jsxs(t,{children:[e.jsx(c,{style:{color:"#ff4d4f",marginRight:8}}),e.jsx(t,{type:"danger",delete:!0,children:"+91 9876543210"}),e.jsx(t,{type:"secondary",children:" (Wrong)"})]}),e.jsxs(t,{children:[e.jsx(h,{style:{color:"#52c41a",marginRight:8}}),e.jsx(t,{strong:!0,children:"919876543210"}),e.jsx(t,{type:"secondary",children:" (Correct)"})]})]})]}),e.jsxs(s,{title:"Customization Options (Optional)",size:"small",children:[e.jsx(o,{type:"secondary",style:{marginBottom:16},children:"You can customize the widget appearance using these options:"}),e.jsx(m,{columns:b,dataSource:y,pagination:!1,bordered:!0,size:"small"})]}),e.jsxs(s,{title:"Complete HTML Example",size:"small",children:[e.jsx(o,{type:"secondary",children:"Here's how y

1our HTML file should look:"}),e.jsx(n,{children:`<!DOCTYPE html>
2<html>
3<head>
4  <title>My Website</title>
5</head>
6<body>
7  <h1>Welcome to my website!</h1>
8  <p>Contact us via WhatsApp!</p>
9
10  <!-- WhatsApp Widget - Add this before </body> -->
11  <script
12    async
13    src=${a}
14    data-phone="919876543210"
15    data-text="Hello! I have a question">
16  <\/script>
17</body>
18</html>`})]})]});export{R as default};