https://purelyautomated.com/ai-chatbot-services/

1<!-- ============================================================
2PURELY AUTOMATED — AI CHATBOT SERVICES PAGE
3MATCHED TO MAIN NEO-BRUTALIST UI
4============================================================= -->
5<!DOCTYPE html>
6<html lang="en">
7<head>
8<meta charset="UTF-8"/>
9<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
10
11<title>Custom AI Chatbot Development Services | Purely Automated</title>
12
13<meta name="description" content="Custom AI chatbots for business. Branded ChatGPT-style assistants trained on your data. Lead capture, support automation, WhatsApp AI, CRM integrations, and website deployment."/>
14
15<link rel="canonical" href="https://purelyautomated.com/ai-chatbot-services/"/>
16
17<meta property="og:title" content="Custom AI Chatbot Development | Purely Automated"/>
18<meta property="og:description" content="Your own branded AI chatbot trained on your business data."/>
19<meta property="og:type" content="website"/>
20
21<link rel="preconnect" href="https://fonts.googleapis.com"/>
22<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
23
24<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"/>
25
26<style>
27
28:root{
29  --black:#0A0A0A;
30  --white:#FAFAF8;
31  --yellow:#FFE566;
32  --orange:#FF4500;
33  --lime:#C8FF00;
34  --cyan:#00F5FF;
35
36  --gray:#D9D9D1;
37  --gray2:#777;
38
39  --border:3px solid var(--black);
40  --border-thick:5px solid var(--black);
41
42  --shadow:5px 5px 0 var(--black);
43  --shadow-lg:8px 8px 0 var(--black);
44
45  --font-head:'Space Grotesk',sans-serif;
46  --font-mono:'Space Mono',monospace;
47}
48
49*{
50  margin:0;
51  padding:0;
52  box-sizing:border-box;
53}
54
55body{
56  background:var(--white);
57  color:var(--black);
58  font-family:var(--font-head);
59  overflow-x:hidden;
60}
61
62a{
63  text-decoration:none;
64  color:inherit;
65}
66
67.container{
68  max-width:1280px;
69  margin:auto;
70  padding:0 2rem;
71}
72
73/* ================= NAV ================= */
74
75nav{
76  height:72px;
77  background:var(--black);
78  border-bottom:var(--border-thick);
79  border-bottom-color:var(--yellow);
80
81  display:flex;
82  align-items:center;
83  justify-content:space-between;
84
85  padding:0 2rem;
86
87  position:fixed;
88  width:100%;
89  top:0;
90  z-index:1000;
91}
92
93.logo{
94  font-family:var(--font-mono);
95  font-weight:700;
96  color:var(--yellow);
97  font-size:1rem;
98}
99
100.logo span{
101  color:white;
102}
103
104.nav-links{
105  display:flex;
106  gap:2rem;
107}
108
109.nav-links a{
110  font-family:var(--font-mono);
111  color:#ccc;
112  text-transform:uppercase;
113  font-size:.7rem;
114  letter-spacing:.1em;
115}
116
117.nav-links a:hover{
118  color:var(--yellow);
119}
120
121.nav-btn{
122  background:var(--yellow);
123  border:var(--border);
124  padding:.7rem 1.4rem;
125  font-family:var(--font-mono);
126  font-size:.7rem;
127  font-weight:700;
128  text-transform:uppercase;
129  box-shadow:var(--shadow);
130}
131
132.nav-btn:hover{
133  transform:translate(-2px,-2px);
134}
135
136/* ================= HERO ================= */
137
138.hero{
139  padding-top:140px;
140  padding-bottom:100px;
141  background:var(--black);
142  border-bottom:var(--border-thick);
143  border-bottom-color:var(--yellow);
144
145  position:relative;
146  overflow:hidden;
147}
148
149.hero::before{
150  content:'';
151  position:absolute;
152  inset:0;
153
154  background-image:
155  linear-gradient(rgba(255,229,102,.04) 1px, transparent 1px),
156  linear-gradient(90deg, rgba(255,229,102,.04) 1px, transparent 1px);
157
158  background-size:60px 60px;
159}
160
161.hero-grid{
162  display:grid;
163  grid-template-columns:1fr 1fr;
164  gap:4rem;
165  position:relative;
166  z-index:2;
167}
168
169.hero-tag{
170  display:inline-block;
171  background:var(--yellow);
172  color:var(--black);
173
174  font-family:var(--font-mono);
175  font-size:.65rem;
176  font-weight:700;
177
178  padding:.35rem .8rem;
179
180  border:2px solid var(--black);
181
182  margin-bottom:1.5rem;
183}
184
185.hero h1{
186  font-size:6rem;
187  line-height:.9;
188  font-weight:700;
189  color:white;
190  margin-bottom:2rem;
191}
192
193.hero h1 .yellow{
194  color:var(--yellow);
195  display:block;
196}
197
198.hero h1 .outline{
199  color:transparent;
200  -webkit-text-stroke:2px white;
201  display:block;
202}
203
204.hero p{
205  color:#bbb;
206  font-size:1rem;
207  line-height:1.8;
208  max-width:540px;
209  margin-bottom:2rem;
210}
211
212.hero-actions{
213  display:flex;
214  gap:1rem;
215  flex-wrap:wrap;
216}
217
218.btn{
219  padding:1rem 2rem;
220  border:var(--border);
221
222  font-family:var(--font-mono);
223  font-weight:700;
224  text-transform:uppercase;
225  font-size:.72rem;
226
227  box-shadow:var(--shadow);
228
229  transition:.12s;
230}
231
232.btn:hover{
233  transform:translate(-3px,-3px);
234}
235
236.btn-yellow{
237  background:var(--yellow);
238}
239
240.btn-white{
241  background:white;
242}
243
244.hero-panel{
245  background:#111;
246  border:var(--border-thick);
247  border-color:var(--yellow);
248
249  padding:2rem;
250
251  align-self:start;
252}
253
254.panel-title{
255  color:var(--yellow);
256
257  font-family:var(--font-mono);
258  text-transform:uppercase;
259  font-size:.7rem;
260  letter-spacing:.1em;
261
262  margin-bottom:1.4rem;
263}
264
265.panel-list{
266  display:flex;
267  flex-direction:column;
268  gap:1rem;
269}
270
271.panel-list li{
272  list-style:none;
273  color:#ccc;
274  line-height:1.6;
275  font-size:.9rem;
276}
277
278/* ================= SECTION ================= */
279
280.section{
281  padding:6rem 0;
282}
283
284.section-title{
285  font-size:4rem;
286  line-height:1;
287  margin-bottom:1rem;
288}
289
290.section-title span{
291  color:var(--orange);
292}
293
294.section-label{
295  font-family:var(--font-mono);
296  text-transform:uppercase;
297  font-size:.7rem;
298  letter-spacing:.12em;
299  margin-bottom:1rem;
300  color:var(--orange);
301}
302
303/* ================= CARDS ================= */
304
305.grid-3{
306  display:grid;
307  grid-template-columns:repeat(3,1fr);
308  gap:0;
309  border:var(--border-thick);
310}
311
312.card{
313  border:2px solid var(--black);
314  padding:2rem;
315  background:white;
316}
317
318.card:hover{
319  background:#f2f2ed;
320}
321
322.card.dark{
323  background:var(--black);
324}
325
326.card.dark h3{
327  color:white;
328}
329
330.card.dark p{
331  color:#aaa;
332}
333
334.card-icon{
335  font-size:2rem;
336  margin-bottom:1rem;
337}
338
339.card h3{
340  font-size:1.2rem;
341  margin-bottom:.8rem;
342}
343
344.card p{
345  color:#555;
346  line-height:1.7;
347  font-size:.9rem;
348}
349
350/* ================= CHAT DEMO ================= */
351
352.demo{
353  background:var(--black);
354  color:white;
355  border-top:var(--border-thick);
356  border-bottom:var(--border-thick);
357  border-color:var(--yellow);
358}
359
360.demo-grid{
361  display:grid;
362  grid-template-columns:1fr 1fr;
363  gap:4rem;
364  align-items:center;
365}
366
367.demo h2{
368  font-size:4rem;
369  line-height:1;
370  margin-bottom:1rem;
371}
372
373.demo h2 span{
374  color:var(--yellow);
375}
376
377.demo p{
378  color:#bbb;
379  line-height:1.8;
380}
381
382.chat-box{
383  background:#111;
384  border:var(--border-thick);
385  border-color:var(--yellow);
386  height:520px;
387
388  display:flex;
389  flex-direction:column;
390}
391
392.chat-header{
393  padding:1rem;
394  border-bottom:2px solid rgba(255,255,255,.08);
395
396  font-family:var(--font-mono);
397  color:var(--yellow);
398}
399
400.chat-messages{
401  flex:1;
402  overflow:auto;
403  padding:1rem;
404}
405
406.msg{
407  margin-bottom:1rem;
408  max-width:80%;
409}
410
411.msg.bot{
412  background:#222;
413  color:white;
414  padding:1rem;
415  border:2px solid var(--yellow);
416}
417
418.msg.user{
419  background:var(--yellow);
420  color:black;
421  padding:1rem;
422  margin-left:auto;
423}
424
425.chat-input{
426  display:flex;
427  border-top:2px solid rgba(255,255,255,.08);
428}
429
430.chat-input input{
431  flex:1;
432  background:black;
433  border:none;
434  color:white;
435  padding:1rem;
436  font-family:var(--font-head);
437}
438
439.chat-input button{
440  width:80px;
441  background:var(--yellow);
442  border:none;
443  font-weight:700;
444}
445
446/* ================= PRICING ================= */
447
448.pricing-grid{
449  display:grid;
450  grid-template-columns:repeat(3,1fr);
451  border:var(--border-thick);
452}
453
454.price-card{
455  border:2px solid var(--black);
456  padding:2.5rem;
457}
458
459.price-card.popular{
460  background:var(--black);
461  color:white;
462}
463
464.price-card.popular .price{
465  color:var(--yellow);
466}
467
468.tier{
469  font-family:var(--font-mono);
470  text-transform:uppercase;
471  font-size:.7rem;
472  margin-bottom:1rem;
473}
474
475.price{
476  font-size:4rem;
477  font-weight:700;
478  margin-bottom:1rem;
479}
480
481.price-card ul{
482  margin-top:1.5rem;
483  display:flex;
484  flex-direction:column;
485  gap:.8rem;
486}
487
488.price-card li{
489  list-style:none;
490  line-height:1.6;
491}
492
493/* ================= CTA ================= */
494
495.cta{
496  background:var(--yellow);
497  border-top:var(--border-thick);
498  padding:5rem 0;
499}
500
501.cta-wrap{
502  display:flex;
503  justify-content:space-between;
504  gap:3rem;
505  align-items:center;
506}
507
508.cta h2{
509  font-size:4rem;
510  line-height:1;
511}
512
513/* ================= FOOTER ================= */
514
515footer{
516  background:black;
517  color:white;
518  padding:2rem 0;
519  border-top:var(--border-thick);
520  border-top-color:var(--yellow);
521}
522
523.footer-inner{
524  display:flex;
525  justify-content:space-between;
526  align-items:center;
527  flex-wrap:wrap;
528  gap:1rem;
529}
530
531.footer-links{
532  display:flex;
533  gap:2rem;
534}
535
536.footer-links a{
537  font-family:var(--font-mono);
538  font-size:.7rem;
539  text-transform:uppercase;
540  color:#aaa;
541}
542
543/* ================= RESPONSIVE ================= */
544

545@media(max-width:900px){
546
547  .hero-grid,
548  .demo-grid,
549  .grid-3,
550  .pricing-grid,
551  .cta-wrap{
552    grid-template-columns:1fr;
553    display:grid;
554  }
555
556  .hero h1{
557    font-size:4rem;
558  }
559
560  .section-title,
561  .demo h2,
562  .cta h2{
563    font-size:2.6rem;
564  }
565
566  .nav-links{
567    display:none;
568  }
569
570}
571
572</style>
573</head>
574
575<body>
576
577<!-- NAV -->
578
579<nav>
580
581  <a href="/" class="logo">
582    PURELY <span>AUTOMATED</span>
583  </a>
584
585  <div class="nav-links">
586    <a href="/#about">About</a>
587    <a href="/#services">Services</a>
588    <a href="/#portfolio">Portfolio</a>
589    <a href="/#pricing">Pricing</a>
590    <a href="/#contact">Contact</a>
591  </div>
592
593  <a href="https://wa.me/917977089727" target="_blank" class="nav-btn">
594    Free Audit →
595  </a>
596
597</nav>
598
599<!-- HERO -->
600
601<section class="hero">
602
603<div class="container hero-grid">
604
605<div>
606
607<div class="hero-tag">
608NEW SERVICE • CUSTOM AI CHATBOT DEVELOPMENT
609</div>
610
611<h1>
612YOUR OWN
613<span class="yellow">AI CHATBOT</span>
614<span class="outline">FOR BUSINESS.</span>
615</h1>
616
617<p>
618Custom AI assistants trained on your business data. 
619Answer customer questions, qualify leads, book meetings, 
620and automate support 24/7 using GPT, Claude, or Gemini.
621</p>
622
623<div class="hero-actions">
624
625<a href="https://wa.me/917977089727" target="_blank" class="btn btn-yellow">
626Get Your AI Chatbot →
627</a>
628
629<a href="#demo" class="btn btn-white">
630Try Live Demo
631</a>
632
633</div>
634
635</div>
636
637<div class="hero-panel">
638
639<div class="panel-title">
640What Your AI Chatbot Can Do
641</div>
642
643<ul class="panel-list">
644
645<li>✓ Answer product and pricing questions automatically</li>
646<li>✓ Capture and qualify leads before sales calls</li>
647<li>✓ Integrate with WhatsApp, CRM, and Calendly</li>
648<li>✓ Handle support requests 24/7</li>
649<li>✓ Train on your PDFs, SOPs, and company docs</li>
650<li>✓ Work like ChatGPT but branded to your business</li>
651
652</ul>
653
654</div>
655
656</div>
657
658</section>
659
660<!-- FEATURES -->
661
662<section class="section">
663
664<div class="container">
665
666<div class="section-label">
667Use Cases
668</div>
669
670<h2 class="section-title">
671One chatbot. <span>Many jobs.</span>
672</h2>
673
674<br><br>
675
676<div class="grid-3">
677
678<div class="card">
679<div class="card-icon">🌐</div>
680<h3>Customer Support Bot</h3>
681<p>Automate FAQs, support tickets, order status, troubleshooting, and customer help.</p>
682</div>
683
684<div class="card">
685<div class="card-icon">📈</div>
686<h3>Sales Qualification</h3>
687<p>Capture leads, ask qualification questions, and send hot leads to your CRM.</p>
688</div>
689
690<div class="card dark">
691<div class="card-icon">🤖</div>
692<h3>Internal Knowledge Bot</h3>
693<p>Train AI on SOPs, policies, and company docs for internal staff support.</p>
694</div>
695
696</div>
697
698</div>
699
700</section>
701
702<!-- DEMO -->
703
704<section class="section demo" id="demo">
705
706<div class="container demo-grid">
707
708<div>
709
710<div class="section-label" style="color:var(--yellow)">
711Live Demo
712</div>
713
714<h2>
715Talk To The
716<span>Automation Advisor</span>
717</h2>
718
719<p>
720This is a real AI chatbot demo similar to what we build for clients.
721Ask about automation, invoices, dashboards, or chatbot deployment.
722</p>
723
724</div>
725
726<div class="chat-box">
727
728<div class="chat-header">
729AUTOMATION ADVISOR • ONLINE
730</div>
731
732<div class="chat-messages">
733
734<div class="msg bot">
735Hi! I'm the Purely Automated AI Advisor.
736What workflow are you trying to automate?
737</div>
738
739<div class="msg user">
740I want to automate invoice processing.
741</div>
742
743<div class="msg bot">
744We can extract invoice data from PDFs using AI and push it into Excel, ERP, or accounting systems automatically.
745</div>
746
747</div>
748
749<div class="chat-input">
750
751<input type="text" placeholder="Ask anything about automation...">
752
753<button>→</button>
754
755</div>
756
757</div>
758
759</div>
760
761</section>
762
763<!-- PRICING -->
764
765<section class="section">
766
767<div class="container">
768
769<div class="section-label">
770Pricing
771</div>
772
773<h2 class="section-title">
774Fixed-price chatbot <span>packages</span>
775</h2>
776
777<br><br>
778
779<div class="pricing-grid">
780
781<div class="price-card">
782
783<div class="tier">
784Starter Bot
785</div>
786
787<div class="price">
788$299
789</div>
790
791<p>
792Simple support or FAQ chatbot.
793</p>
794
795<ul>
796<li>✓ Website embed</li>
797<li>✓ FAQ training</li>
798<li>✓ 1 week delivery</li>
799<li>✓ Lead capture</li>
800</ul>
801
802</div>
803
804<div class="price-card popular">
805
806<div class="tier">
807Most Popular
808</div>
809
810<div class="price">
811$899

812</div>
813
814<p>
815Business-grade AI assistant with integrations.
816</p>
817
818<ul>
819<li>✓ CRM integration</li>
820<li>✓ WhatsApp integration</li>
821<li>✓ Calendar booking</li>
822<li>✓ Custom personality</li>
823</ul>
824
825</div>
826
827<div class="price-card">
828
829<div class="tier">
830Enterprise
831</div>
832
833<div class="price">
834Custom
835</div>
836
837<p>
838Complex multi-system AI deployments.
839</p>
840
841<ul>
842<li>✓ Internal AI assistant</li>
843<li>✓ ERP/database integration</li>
844<li>✓ Analytics dashboard</li>
845<li>✓ Ongoing training</li>
846</ul>
847
848</div>
849
850</div>
851
852</div>
853
854</section>
855
856<!-- CTA -->
857
858<section class="cta">
859
860<div class="container cta-wrap">
861
862<div>
863
864<h2>
865READY TO BUILD YOUR
866AI CHATBOT?
867</h2>
868
869</div>
870
871<div>
872
873<a href="https://wa.me/917977089727" target="_blank" class="btn btn-white">
874Start Your Project →
875</a>
876
877</div>
878
879</div>
880
881</section>
882
883<!-- FOOTER -->
884
885<footer>
886
887<div class="container footer-inner">
888
889<div class="logo">
890PURELY <span>AUTOMATED</span>
891</div>
892
893<div class="footer-links">
894<a href="/">Home</a>
895<a href="/#services">Services</a>
896<a href="/#pricing">Pricing</a>
897<a href="/#contact">Contact</a>
898</div>
899
900</div>
901
902</footer>
903
904<!-- Google Analytics — deferred for performance -->

905<script>
906window.addEventListener('load', function(){
907  var s=document.createElement('script');
908  s.async=true;
909  s.src='https://www.googletagmanager.com/gtag/js?id=G-6T47YRZB09';
910  document.head.appendChild(s);
911  window.dataLayer=window.dataLayer||[];
912  function gtag(){dataLayer.push(arguments);}
913  window.gtag=gtag;
914  gtag('js',new Date());
915  gtag('config','G-6T47YRZB09');
916});
917</script>

917
918</body>
919
920</html>