/
Voice Bot / Assistant Automatic Creation without User Info Needed

Voice Bot / Assistant Automatic Creation without User Info Needed

Owned by Anthony Robert
Last updated: Nov 12, 2024
5 min read

Project Document: Voice Ordering Bot Setup Page

Objective

Create a mobile-friendly webpage that:

  1. Displays a 3-minute countdown timer during bot creation.

  2. Dynamically updates to display the bot’s phone number when it’s ready.

  3. Collects customer information through a GoHighLevel form if they prefer to be notified instead of waiting.

  4. Links the bot phone number to the GoHighLevel contact, updating if the customer calls or submits their information through the form.

Overview of Tools

Step 1: Set Up the Frontend

The frontend displays a countdown timer, checks the bot creation status periodically, and shows the bot’s phone number once it’s ready. It also embeds the GoHighLevel form for customers to submit contact details if they don’t wish to wait.

HTML and JavaScript Code for Frontend

html

Copy code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Get Your Voice Ordering Bot</title> <style> body { font-family: Arial, sans-serif; background-color: #f7f8fc; color: #333; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .container { max-width: 500px; width: 90%; padding: 20px; margin: 10px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center; } .title { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; color: #4CAF50; } .subtitle { font-size: 1.1em; margin-bottom: 20px; } .benefits { margin-bottom: 20px; font-size: 0.9em; color: #555; } .countdown-timer { font-size: 2em; color: #4CAF50; margin-bottom: 20px; } #bot-number { display: none; font-size: 1.2em; margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="title">Get Your Voice Ordering Bot!</div> <div class="subtitle">Automate orders, increase revenue, and give customers a seamless ordering experience.</div> <div class="benefits"> <ul style="text-align: left; padding-left: 20px;"> <li>24/7 order-taking assistant</li> <li>Enhanced customer convenience</li> <li>Reduced phone wait times</li> <li>Integrates with your POS</li> </ul> </div> <div id="countdown-container"> <div class="countdown-timer" id="timer">3:00</div> <p>We're setting up your bot now! Please wait, or enter your contact info to get updates.</p> </div> <!-- Embed GoHighLevel form here --> <iframe src="YOUR_GO_HIGH_LEVEL_FORM_URL" width="100%" height="400px" frameborder="0"></iframe> <div id="bot-number"> 🎉 Your bot is ready! Call it at: <span id="phone-number"></span> </div> </div> <script> // Set initial time for the countdown (3 minutes in seconds) let timeLeft = 180; const timerDisplay = document.getElementById("timer"); // Countdown Timer const countdown = setInterval(() => { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; timerDisplay.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; if (timeLeft <= 0) { clearInterval(countdown); checkBotStatus(); } timeLeft--; }, 1000); // Polling to Check Bot Creation Status const pollForBotNumber = setInterval(() => { checkBotStatus(); }, 5000); // Poll every 5 seconds function checkBotStatus() { fetch('/api/check-bot-status') // Replace with your actual endpoint .then(response => response.json()) .then(data => { if (data.ready) { displayBotNumber(data.phoneNumber); clearInterval(countdown); clearInterval(pollForBotNumber); } }) .catch(error => console.error('Error checking bot status:', error)); } // Function to Display the Bot Phone Number function displayBotNumber(phoneNumber) { document.getElementById("phone-number").innerText = phoneNumber; document.getElementById("bot-number").style.display = "block"; document.getElementById("countdown-container").style.display = "none"; } </script> </body> </html>

Step 2: Backend Endpoint for Bot Status Check (/api/check-bot-status)

This endpoint is polled by the frontend to determine if the bot is ready. Once the bot is ready, it will respond with the bot’s phone number.

Pipedream Code

javascript

Copy code

export default defineComponent({ async run({ steps, $ }) { // Retrieve bot status from data store const botStatus = await $.data.get("botStatus"); // Return the status to the client if (botStatus && botStatus.ready) { return { ready: true, phoneNumber: botStatus.phoneNumber }; } else { return { ready: false }; } } });

Step 3: Webhook for GoHighLevel Form Submissions

The GoHighLevel form submission will trigger a webhook that sends data to Pipedream to capture and store user information. This data will then be linked with the bot’s phone number.

Pipedream Webhook Code for Capturing User Info

javascript

Copy code

export default defineComponent({ async run({ steps, $ }) { const { name, email, phone } = steps.trigger.event.body; // Save info to a datastore or CRM await $.data.set(`${email}_info`, { name, email, phone }); return { success: true, message: "User info saved successfully" }; } });

Step 4: Bot Creation Workflow (Using http://Make.com or Pipedream)

  1. Trigger Bot Creation: When a new user initiates bot creation, start the bot setup process in Pipedream or http://Make.com .

  2. Monitor Bot Creation Status:

    • After triggering bot creation, periodically check the status.

    • Once created, update bot status with { ready: true, phoneNumber: "+1234567890" }.

http://Make.com Bot Creation Workflow:

  • Trigger: HTTP request to initiate bot creation.

  • Steps:

    • Step 1: Make an HTTP request to your bot creation service.

    • Step 2: Delay (e.g., 1 minute).

    • Step 3: Check bot creation status and update datastore with { ready: true, phoneNumber: "BotNumber" }.

Example Code:

Copy code

export default defineComponent({ async run({ steps, $ }) { // Initiate bot creation logic here (e.g., HTTP request) await $.http.post("YOUR_BOT_CREATION_API_ENDPOINT", { data: { /* Bot creation data */ } }); // Update bot status when ready await $.data.set("botStatus", { ready: true, phoneNumber: "+1234567890" }); } });

Step 5: Capture Caller Information Using VAPI and Update GoHighLevel

When a customer calls the bot’s number, use VAPI to capture the caller’s phone number. This data can then be associated with the bot and stored in GoHighLevel.

Pipedream Code to Capture Caller Info via VAPI and Update GoHighLevel

Copy code

export default defineComponent({ async run({ steps, $ }) { const callerPhoneNumber = steps.trigger.event.callerNumber; const botPhoneNumber = steps.trigger.event.botNumber; // Check if caller exists in GoHighLevel const existingContact = await $.http.get(`https://api.gohighlevel.com/v1/contacts/search?query=${callerPhoneNumber}`, { headers: { Authorization: `Bearer YOUR_GOHIGHLEVEL_API_KEY` } }); // If contact exists, update it; otherwise, create a new contact if (existingContact.data.length > 0) { const contactId = existingContact.data[0].id; await $.http.put(`https://api.gohighlevel.com/v1/contacts/${contactId}`, { headers: { Authorization: `Bearer YOUR_GOHIGHLEVEL_API_KEY` }, data: { customFieldBotNumber: botPhoneNumber } }); } else { await $.http.post("https://api.gohighlevel.com/v1/contacts", { headers: { Authorization: `Bearer YOUR_GOHIGHLEVEL_API_KEY` }, data: { phone: callerPhoneNumber, customFieldBotNumber: botPhoneNumber } }); } return { success: true }; } });

Summary

Component

Description

Tool

Code

Component

Description

Tool

Code

Frontend Countdown & Polling

Timer and polling function for bot status

JavaScript

[Provided in HTML/JS earlier]

GoHighLevel Form

Collects user info, sending data to Pipedream via webhook

GoHighLevel

Form URL in iframe

Webhook to Capture User Info

Captures and stores user contact details for follow-up notifications

Pipedream

Webhook code for storing user info

Check Bot Status API

Returns bot creation status and phone number

Pipedream

check-bot-status code

Bot Creation Process

Automates bot creation and updates readiness status

http://Make.com / Pipedream

Workflow for bot setup and status update

Caller Info Capture via VAPI

Links caller info with GoHighLevel contact when the customer calls the bot’s phone number

VAPI / Pipedream

Code to capture caller and update GoHighLevel

This document provides a complete setup to manage the Voice Ordering Bot setup process with seamless integration into GoHighLevel, VAPI, and automation tools.

They now have a countdown widget in Gohighlevel

 

Logic-Manager-11-12-2024_01_08_AM.png