Chat Widget Setup

​

Creating Your Chat Widget

​

Widget Configuration

​

Basic Settings

​

Position Settings

{
  "position": "bottom-right",
  "margin": {
    "bottom": "20px",
    "right": "20px"
  }
}

{
  "position": "bottom-left", 
  "margin": {
    "bottom": "20px",
    "left": "20px"
  }
}

​

Step-by-Step Setup Guide

​

Step 1: Configure Widget Appearance

1. Widget Title: Enter a welcoming title for your chat widget
   Copy

   Examples:
   - "Chat with us"
   - "Need help?"
   - "Ask our AI assistant"
   - "Get instant support"
   
2. Primary Color: Choose your brand color
   • Use the color picker for visual selection
   • Or enter a hex code directly
   • Preview updates in real-time
3. Position: Select widget placement
   • Bottom-right (recommended for most sites)
   • Bottom-left (alternative placement)

​

Step 2: Preview Your Widget

​

Step 3: Generate and Copy Embed Code

1. Create/Update Widget: Click the action button
2. Copy Embed Code: Use the “Copy Code” button
3. Copy Script URL: Alternative installation method

​

Embed Code Implementation

​

Standard Implementation

<!-- Recepta.ai Chat Widget -->
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'YOUR_SCRIPT_URL_HERE';
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
})();
</script>

​

Advanced Implementation Options

function add_recepta_chat_widget() {
    ?>
    <script>
    // Your embed code here
    </script>
    <?php
}
add_action('wp_footer', 'add_recepta_chat_widget');

<!-- Before </body> tag -->
{{ 'recepta-chat-widget.js' | asset_url | script_tag }}

import { useEffect } from 'react';

const ChatWidget = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'YOUR_SCRIPT_URL_HERE';
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return null;
};

export default ChatWidget;

<script>
// Your Recepta.ai embed code
</script>

​

Testing Your Widget

​

Functionality Checklist

​

Test Conversation Examples

Basic Questions:
- "What are your business hours?"
- "How can I contact you?"
- "What services do you offer?"

Product/Service Inquiries:
- "Can you tell me about your pricing?"
- "Do you offer consultations?"
- "How do I get started?"

Support Scenarios:
- "I need help with my order"
- "I have a technical question"
- "Can I speak to someone?"

​

Configuration Updates

​

Updating Existing Widgets

1. Access Widget Settings: Return to the Chat Widget page
2. Make Changes: Update title, color, or position
3. Update Widget: Click the update button
4. Automatic Deployment: Changes apply automatically (no code changes needed)

​

Managing Multiple Widgets

​

Troubleshooting

​

Common Issues and Solutions

​

Performance Optimization

​

Best Practices

​

Monitoring and Analytics

• Conversation Volume: Daily/weekly chat counts
• Response Times: Average AI response speed
• User Satisfaction: Post-chat feedback scores
• Conversion Tracking: Leads generated through chat

​

Next Steps