Assistable.ai

https://help.assistable.ai
Admin
Assistable.ai is a platform for building, testing, customizing, and deploying production-ready AI...
Tokens:46,708
Snippets:335
Trust Score:5.6
Update:11 months ago
Show doc for...
Tokens:
Raw
### Example FAQ for Knowledge Base

Source: https://help.assistable.ai/beginner-walkthrough/knowledgebase

An example of a Question and Answer pair for the knowledge base. FAQs are crucial for improving AI accuracy by providing precise responses to common customer queries.

```plaintext
Question: Do you offer free estimates?
Answer: Yes, Apex Concrete provides free estimates for all services.
```

--------------------------------

### Define AI Assistant Identity (Arduino Example)

Source: https://help.assistable.ai/beginner-walkthrough/prompting

This snippet demonstrates how to define the identity and role of an AI assistant using a prompt. It specifies the assistant's name, purpose, and tone, which guides its behavior in interactions. This is a foundational step for creating a functional AI.

```arduino
You are Emma, a receptionist for Apex Concrete. Your role includes answering customer inquiries, qualifying leads, and scheduling appointments. You maintain a professional, approachable, and efficient tone. 
```

--------------------------------

### Correcting Knowledge Base Responses with JSON

Source: https://help.assistable.ai/beginner-walkthrough/knowledgebase

This example shows how to input corrected responses for specific queries in the knowledge base using a JSON-like format. This is useful for refining AI accuracy when direct Q&A pairs are insufficient.

```json
{
  "Query": "What are your services?",
  "Answer": "What services do you offer?: We service concrete foundations, concrete driveways, concrete retainer walls, paving, and masonry work."
}
```

--------------------------------

### HTML Structure for AI Call Interface

Source: https://help.assistable.ai/chat-ai/ai-chat-widget-beta

This HTML code defines the complete front-end structure and styling for the AI Call Interface. It includes elements for the widget container, phone header with avatar and titles, mode selection, phone display, call buttons, and input fields. It is designed to be responsive and visually appealing, utilizing CSS for layout and effects.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Call Interface</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
}
.call-container {
max-width: 500px;
margin: 0 auto;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.phone-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px 30px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.phone-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circles" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect x="0" y="0" width="100" height="100" fill="url(%23circles)"/></svg>');
}
.ai-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.ai-avatar.talking {
animation: pulse 1.5s infinite;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.header-title {
color: white;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.header-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
position: relative;
z-index: 1;
}
.mode-selector {
    display: flex;
background: #f1f5f9;
margin: 30px;
border-radius: 16px;
padding: 6px;
position: relative;
}
.mode-option {
flex: 1;
padding: 12px 20px;
text-align: center;
border-radius: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.mode-option.active {
background: white;
color: #667eea;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.call-interface {
padding: 0 30px 30px;
}
.call-section {
display: none;
animation: slideIn 0.3s ease-out;
}
.call-section.active {
display: block;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.phone-display {
background: #f8fafc;
border-radius: 16px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
border: 2px solid #e2e8f0;
}
.phone-number {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
letter-spacing: 2px;
}
.phone-subtitle {
color: #64748b;
font-size: 0.9rem;
}
.call-button {
width: 100%;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border: none;
padding: 18px;
border-radius: 16px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.call-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.call-button:hover::before {
left: 100%;
}
.call-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
color: #374151;
font-weight: 500;
margin-bottom: 8px;
font-size: 0.9rem;
}
.phone-input {
width: 100%;
padding: 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1.1rem;
transition: all 0.3s ease;
background: white;
}
.phone-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.callback-button {
width: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 18px;
border-radius: 16px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.callback-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.callback-button.requesting {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
</style>
</head>
<body>
<div class="call-container">
<div class="phone-header">
<div class="ai-avatar talking">📞</div>
<div class="header-title">AI Call Assistant</div>
<div class="header-subtitle">Your virtual communication partner</div>
</div>
<div class="mode-selector">
<div class="mode-option active">Call Me</div>
<div class="mode-option">Call You</div>
</div>
<div class="call-interface">
<div id="call-me-section" class="call-section active">
<div class="phone-display">
<div class="phone-number">+1 (678) 931-7883</div>
<div class="phone-subtitle">We will call you back shortly.</div>
</div>
<button class="call-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.75 17.55C21.75 16.89 21.75 16.24 21.63 15.6C21.38 14.17 20.56 12.85 19.34 11.63C18.12 10.41 16.8 9.59 15.37 9.34C14.73 9.22 14.08 9.22 13.42 9.22C11.73 9.22 10.05 9.46 8.37 9.94C6.69 10.41 5.13 11.34 3.68 12.62C2.23 13.9 1.05 15.47 0.22 17.27C-0.61 19.07 0.22 20.98 1.68 22.44C2.68 23.44 3.96 23.99 5.28 24C5.54 24 5.8 24 6.06 24C8.03 23.75 9.74 22.92 11.2 21.55C12.67 20.17 13.68 18.46 13.89 16.63C13.89 16.38 13.89 16.13 13.89 15.88C13.89 14.73 13.68 13.58 13.26 12.43C12.84 11.28 12.22 10.23 11.4 9.29C10.58 8.34 9.52 7.52 8.29 6.85C7.06 6.17 5.64 5.65 4.04 5.31C2.44 4.97 0.77 5.07 0 5.19C2.68 3.36 5.42 2.31 8.24 1.58C10.98 0.85 13.77 0.42 16.57 0.27C19.37 0.12 22.13 0.22 24 0.54C23.75 3.36 22.7 6.1 20.87 8.37C19.04 10.64 16.57 11.92 13.89 11.92C13.68 11.92 13.47 11.92 13.26 11.92C14.54 12.75 15.64 14.17 16.31 15.7C16.98 17.23 17.08 18.84 17.08 20.55C17.08 21.7 16.87 22.7 16.45 23.54C16.03 24.37 15.41 24 14.59 24C14.33 24 14.07 24 13.81 24C11.93 23.75 10.24 22.92 8.7 21.55C7.16 20.17 6.15 18.46 5.94 16.63C5.94 16.38 5.94 16.13 5.94 15.88C5.94 14.73 5.73 13.58 5.31 12.43C4.89 11.28 4.27 10.23 3.45 9.29C2.63 8.34 1.57 7.52 0.34 6.85C-0.89 6.17 -2.31 5.65 -3.91 5.31C-5.51 4.97 -7.18 5.07 -7.91 5.19C-5.25 3.36 -2.51 2.31 -0.68 1.58C1.15 0.85 3.94 0.42 6.74 0.27C9.54 0.12 12.3 0.22 14.17 0.54C13.92 3.36 12.87 6.1 10.94 8.37C9.11 10.64 6.64 11.92 3.96 11.92C3.75 11.92 3.54 11.92 3.33 11.92C4.61 12.75 5.71 14.17 6.38 15.7C7.05 17.23 7.15 18.84 7.15 20.55C7.15 21.7 6.94 22.7 6.52 23.54C6.1 24.37 5.48 24 4.66 24C4.4 24 4.14 24 3.88 24C2.01 23.75 0.31 22.92 -1.24 21.55C-2.78 20.17 -3.79 18.46 -3.99 16.63C-3.99 16.38 -3.99 16.13 -3.99 15.88C-3.99 14.73 -4.2 13.58 -4.62 12.43C-5.04 11.28 -5.66 10.23 -6.48 9.29C-7.3 8.34 -8.36 7.52 -9.59 6.85C-10.82 6.17 -12.24 5.65 -13.84 5.31C-15.44 4.97 -17.11 5.07 -17.84 5.19C-15.18 3.36 -12.44 2.31 -10.61 1.58C-8.88 0.85 -6.09 0.42 -3.29 0.27C-0.49 0.12 1.97 0.22 4.14 0.54C4.39 3.36 5.44 6.1 7.37 8.37C9.2 10.64 11.67 11.92 14.35 11.92C14.56 11.92 14.77 11.92 14.98 11.92C13.7 12.75 12.6 14.17 11.93 15.7C11.26 17.23 11.16 18.84 11.16 20.55C11.16 21.7 11.37 22.7 11.79 23.54C12.21 24.37 12.83 24 13.65 24C13.91 24 14.17 24 14.43 24C16.31 23.75 18.01 22.92 19.55 21.55C21.09 20.17 22.1 18.46 22.3 16.63C22.3 16.38 22.3 16.13 22.3 15.88C22.3 14.73 22.09 13.58 21.67 12.43C21.25 11.28 20.63 10.23 19.81 9.29C18.99 8.34 17.93 7.52 16.7 6.85C15.47 6.17 14.05 5.65 12.45 5.31C10.85 4.97 9.18 5.07 8.45 5.19C5.79 3.36 3.05 2.31 1.22 1.58C-0.61 0.85 -3.4 0.42 -6.2 -0.27C-9 -1.09 -11.74 -1.09 -14.54 -1.09C-17.34 -1.09 -20.14 -1.09 -22.94 -1.09C-25.74 -1.09 -28.54 -1.09 -31.34 -1.09C-34.14 -1.09 -36.94 -1.09 -39.74 -1.09C-42.54 -1.09 -45.34 -1.09 -48.14 -1.09C-50.94 -1.09 -53.74 -1.09 -56.54 -1.09C-59.34 -1.09 -62.14 -1.09 -64.94 -1.09C-67.74 -1.09 -70.54 -1.09 -73.34 -1.09C-76.14 -1.09 -78.94 -1.09 -81.74 -1.09C-84.54 -1.09 -87.34 -1.09 -90.14 -1.09C-92.94 -1.09 -95.74 -1.09 -98.54 -1.09C-98.54 0.72 -98.54 2.53 -98.54 4.34C-98.54 6.15 -98.54 7.96 -98.54 9.77C-98.54 11.58 -98.54 13.39 -98.54 15.2C-98.54 17.01 -98.54 18.82 -98.54 20.63C-98.54 22.44 -98.54 24.25 -98.54 26.06C-98.54 27.87 -98.54 29.68 -98.54 31.49C-98.54 33.3 -98.54 35.11 -98.54 36.92C-98.54 38.73 -98.54 40.54 -98.54 42.35C-98.54 44.16 -98.54 45.97 -98.54 47.78C-98.54 49.59 -98.54 51.4 -98.54 53.21C-98.54 55.02 -98.54 56.83 -98.54 58.64C-98.54 60.45 -98.54 62.26 -98.54 64.07C-98.54 65.88 -98.54 67.69 -98.54 69.5C-98.54 71.31 -98.54 73.12 -98.54 74.93C-98.54 76.74 -98.54 78.55 -98.54 80.36C-98.54 82.17 -98.54 83.98 -98.54 85.79C-98.54 87.6 -98.54 89.41 -98.54 91.22C-98.54 93.03 -98.54 94.84 -98.54 96.65C-98.54 98.46 -98.54 100.27 -98.54 102.08C-98.54 103.89 -98.54 105.7 -98.54 107.51C-98.54 109.32 -98.54 111.13 -98.54 112.94C-98.54 114.75 -98.54 116.56 -98.54 118.37C-98.54 120.18 -98.54 121.99 -98.54 123.8C-98.54 125.61 -98.54 127.42 -98.54 129.23C-98.54 131.04 -98.54 132.85 -98.54 134.66C-98.54 136.47 -98.54 138.28 -98.54 140.09C-98.54 141.9 -98.54 143.71 -98.54 145.52C-98.54 147.33 -98.54 149.14 -98.54 150.95C-98.54 152.76 -98.54 154.57 -98.54 156.38C-98.54 158.19 -98.54 160 -98.54 161.81C-98.54 163.62 -98.54 165.43 -98.54 167.24C-98.54 169.05 -98.54 170.86 -98.54 172.67C-98.54 174.48 -98.54 176.29 -98.54 178.1C-98.54 179.91 -98.54 181.72 -98.54 183.53C-98.54 185.34 -98.54 187.15 -98.54 188.96C-98.54 190.77 -98.54 192.58 -98.54 194.39C-98.54 196.2 -98.54 198.01 -98.54 199.82C-98.54 201.63 -98.54 203.44 -98.54 205.25C-98.54 207.06 -98.54 208.87 -98.54 210.68C-98.54 212.49 -98.54 214.3 -98.54 216.11C-98.54 217.92 -98.54 219.73 -98.54 221.54C-98.54 223.35 -98.54 225.16 -98.54 226.97C-98.54 228.78 -98.54 230.59 -98.54 232.4C-98.54 234.21 -98.54 236.02 -98.54 237.83C-98.54 239.64 -98.54 241.45 -98.54 243.26C-98.54 245.07 -98.54 246.88 -98.54 248.69C-98.54 250.5 -98.54 252.31 -98.54 254.12C-98.54 255.93 -98.54 257.74 -98.54 259.55C-98.54 261.36 -98.54 263.17 -98.54 264.98C-98.54 266.79 -98.54 268.6 -98.54 270.41C-98.54 272.22 -98.54 274.03 -98.54 275.84C-98.54 277.65 -98.54 279.46 -98.54 281.27C-98.54 283.08 -98.54 284.89 -98.54 286.7 -98.54 288.51C-98.54 290.32 -98.54 292.13 -98.54 293.94C-98.54 295.75 -98.54 297.56 -98.54 299.37C-98.54 301.18 -98.54 302.99 -98.54 304.8C-98.54 306.61 -98.54 308.42 -98.54 310.23C-98.54 312.04 -98.54 313.85 -98.54 315.66C-98.54 317.47 -98.54 319.28 -98.54 321.09C-98.54 322.9 -98.54 324.71 -98.54 326.52C-98.54 328.33 -98.54 330.14 -98.54 331.95C-98.54 333.76 -98.54 335.57 -98.54 337.38C-98.54 339.19 -98.
```

--------------------------------

### CSS Styling for Assistable AI UI

Source: https://help.assistable.ai/chat-ai/ai-chat-widget-beta

This CSS code styles the main container, header, mode selector, call interface, input fields, buttons, and status messages for the Assistable AI application. It also includes responsive design adjustments for smaller screens and animations for fading effects.

```css
.status-message {
text-align: center;
padding: 20px;
background: #f0fdf4;
border-radius: 12px;
margin-top: 20px;
border: 1px solid #bbf7d0;
color: #15803d;
font-weight: 500;
display: none;
}
.status-message.show {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.call-icon {
font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 480px) {
.call-container {
margin: 0 10px;
}
.phone-header {
padding: 25px 20px 35px;
}
.call-interface {
padding: 0 20px 20px;
}
.mode-selector {
margin: 20px;
}
.phone-number {
font-size: 1.6rem;
}
}
```

--------------------------------

### Manual Text Input for Knowledge Base Data

Source: https://help.assistable.ai/beginner-walkthrough/knowledgebase

This code snippet demonstrates how to manually input text data into the knowledge base. It includes company-specific services and contact information. This method is useful for adding concise, predefined information.

```plaintext
Apex Concrete serves Tucson, Arizona, offering: - Concrete Foundations - Driveways - Masonry Services Contact us at support@concrete.com. 
```

--------------------------------

### Format Phone Number Input with JavaScript

Source: https://help.assistable.ai/chat-ai/ai-chat-widget-beta

This JavaScript code formats a phone number input field in real-time, applying parentheses, spaces, and hyphens. It also includes logic for handling backspace key presses and provides visual validation feedback on blur and resets the border on focus. Finally, it includes functionality to copy a hardcoded phone number to the clipboard.

```javascript
document.getElementById('phoneInput').addEventListener('input', function(e) {
let input = e.target;
let value = input.value.replace(/\D/g, ''); // Remove all non-digits
let cursorPosition = input.selectionStart;
let oldLength = input.value.length;
// Format the number
let formattedValue = '';
if (value.length > 0) {
if (value.length <= 3) {
formattedValue = `(${value}`;
} else if (value.length <= 6) {
formattedValue = `(${value.slice(0, 3)}) ${value.slice(3)}`;
} else {
formattedValue = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6, 10)}`;
}
}
// Update the input value
input.value = formattedValue;
// Adjust cursor position if needed
let newLength = input.value.length;
if (newLength > oldLength) {
cursorPosition += (newLength - oldLength);
}
// Set cursor position
input.setSelectionRange(cursorPosition, cursorPosition);
});
// Handle backspace properly
document.getElementById('phoneInput').addEventListener('keydown', function(e) {
if (e.key === 'Backspace') {
let input = e.target;
let value = input.value;
let cursorPos = input.selectionStart;
// If cursor is right after a formatting character, move it back
if (cursorPos > 0 && (value[cursorPos - 1] === ')' || value[cursorPos - 1] === ' ' || value[cursorPos - 1] === '-')) {
e.preventDefault();
input.setSelectionRange(cursorPos - 1, cursorPos - 1);
}
}
});
// Show validation on blur
document.getElementById('phoneInput').addEventListener('blur', function(e) {
const digitsOnly = e.target.value.replace(/\D/g, '');
if (digitsOnly.length === 10) {
e.target.style.borderColor = '#10b981';
} else if (digitsOnly.length > 0 && digitsOnly.length < 10) {
e.target.style.borderColor = '#ef4444';
} else {
e.target.style.borderColor = '#e5e7eb';
}
});
// Reset border on focus
document.getElementById('phoneInput').addEventListener('focus', function(e) {
e.target.style.borderColor = '#667eea';
});
// Copy phone number on click
document.querySelector('.phone-number').addEventListener('click', function() {
navigator.clipboard.writeText('6789317883').then(function() {
showStatus('📋 Phone number copied to clipboard!');
});
});
```

--------------------------------

### JavaScript for Call Mode Switching and Callback Requests

Source: https://help.assistable.ai/chat-ai/ai-chat-widget-beta

This JavaScript code handles the interactive elements of the Assistable AI call interface. It includes functions to switch between inbound and outbound call modes, update the UI accordingly, and request a callback by sending the user's phone number to a webhook. It also includes a function to display status messages to the user.

```javascript
let currentMode = 'inbound';

function switchMode(mode) {
  currentMode = mode;
  // Update active mode selector
  document.querySelectorAll('.mode-option').forEach(option => {
    option.classList.remove('active');
  });
  event.target.classList.add('active');

  // Show/hide sections
  document.querySelectorAll('.call-section').forEach(section => {
    section.classList.remove('active');
  });
  document.getElementById(mode).classList.add('active');

  // Update header
  const avatar = document.getElementById('aiAvatar');
  const title = document.querySelector('.header-title');
  const subtitle = document.querySelector('.header-subtitle');

  if (mode === 'inbound') {
    title.textContent = 'Talk to Our AI Agent';
    subtitle.textContent = 'Available 24/7 • Average response time: < 2 seconds';
    avatar.textContent = '🤖';
  } else {
    title.textContent = 'AI Will Call You';
    subtitle.textContent = 'Enter your number • AI calls in 30 seconds';
    avatar.textContent = '📞';
  }

  // Hide status message
  document.getElementById('statusMessage').classList.remove('show');
}

function requestCallback() {
  const phoneInput = document.getElementById('phoneInput');
  const button = document.getElementById('callbackButton');
  const avatar = document.getElementById('aiAvatar');
  const text = document.getElementById('callbackText');

  // Check if phone number has at least 10 digits
  const digitsOnly = phoneInput.value.replace(/D/g, '');
  if (digitsOnly.length < 10) {
    phoneInput.style.borderColor = '#ef4444';
    phoneInput.focus();
    showStatus('⚠️ Please enter a valid 10-digit phone number');
    return;
  }

  // Reset border color
  phoneInput.style.borderColor = '#e5e7eb';

  // Start requesting state
  button.classList.add('requesting');
  avatar.classList.add('talking');
  text.textContent = 'Setting up call...';

  console.log('Attempting to call webhook with number:', digitsOnly);

  // Make the webhook call
  fetch('https://services.leadconnecto…c94', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ to: digitsOnly })
  })
  .then(response => {
    console.log('Webhook response:', response);
    text.textContent = 'Call scheduled successfully!';
    showStatus(`🚀 Perfect! Our AI will call ${phoneInput.value} shortly. Please keep your phone nearby and answer when it rings!`);
  })
  .catch(error => {
    console.error('Webhook error:', error);
    // Even if there's a CORS error, the webhook might still work
    text.textContent = 'Call scheduled!';
    showStatus(`📞 Great! Our AI will call ${phoneInput.value} shortly. Please keep your phone nearby!`);
  })
  .finally(() => {
    setTimeout(() => {
      // Reset after 5 seconds
      button.classList.remove('requesting');
      avatar.classList.remove('talking');
      text.textContent = 'Have AI Call Me in 30 Seconds';
      phoneInput.value = '';
    }, 5000);
  });
}

function showStatus(message) {
  const statusDiv = document.getElementById('statusMessage');
  statusDiv.textContent = message;
  statusDiv.classList.add('show');
  setTimeout(() => {
    statusDiv.classList.remove('show');
  }, 8000);
}
```

--------------------------------

### Post-Call Webhook Payload Example

Source: https://help.assistable.ai/voice-ai/setting-up-pre-call-and-post-call-webhooks-in-gohighlevel

This JSON object details the structure of data sent in a post-call webhook. It contains comprehensive call analytics, including call ID, type, duration, sentiment analysis, transcript, and recording URL. This allows for detailed post-call processing and automation.

```json
{
"call_id": "null",
"call_type": "null",
"direction": "null",
"to": "null",
"from": "null",
"contact_id": "null",
"disconnection_reason": "null",
"user_sentiment": "null",
"call_summary": "null",
"call_completion": "null",
"call_completion_reason": "null",
"assistant_task_completion": "null",
"recording_url": "null",
"call_time_ms": "null",
"call_time_seconds": "null",
"full_transcript": "null",
"start_timestamp": "null",
"end_timestamp": "null",
"Added_to_wallet": true
}
```
Tokens:
Raw