Support Beacon

The Beacon is Kitoro’s embeddable support widget. Add it to your website to let visitors chat with Atlas AI, submit support requests, and track conversions back to content.

What You Get

• Live Chat: Visitors chat with Atlas AI, powered by your knowledge base
• Contact Form: Collect support requests when you’re offline
• Conversion Tracking: Attribute signups and purchases to the content that generated them
• Branding: Match your brand colors, logo, and welcome message

Setup

Step 1: Configure the Widget

1. Go to Settings → Support Beacon in Kitoro
2. Toggle features on/off:
   • Live Chat (Atlas AI)
   • Contact Form
   • Require Email
   • AI Auto-Reply
3. Customize branding:
   • Upload your logo
   • Set your brand color
   • Write a welcome message
   • Choose button icon and position

Step 2: Get the Embed Code

1. In Settings → Support Beacon, scroll to Installation
2. Click Get Embed Code
3. Copy the code snippet

Step 3: Add to Your Website

Paste the embed code just before the closing </body> tag on every page where you want the widget:

<script>
  (function(w,d,s,k){
    w.KitoroBeacon=k;
    var js=d.createElement(s);
    js.async=true;
    js.src='https://beacon.kitoro.com/widget.js';
    js.dataset.key=k;
    d.head.appendChild(js);
  })(window,document,'script','kit_pub_YOUR_KEY_HERE');
</script>

The widget appears as a floating button in the corner of your site.

Features

Live Chat with Atlas

When enabled, visitors can chat with Atlas AI in real-time:

• Atlas answers questions using your Library knowledge
• Complex questions get escalated to your Support queue
• Conversations sync to Kitoro for follow-up

Contact Form

When live chat is disabled or during offline hours:

• Visitors submit their email and message
• Creates a ticket in your Support queue
• Atlas drafts a response for your approval

Branding Options

Setting	Description
Logo	Your company logo (200x200px recommended)
Company Name	Shown in the widget header
Welcome Message	First thing visitors see
Brand Color	Button and accent color
Position	Bottom-right or bottom-left
Button Icon	Chat, AI, Help, Support, etc.

Conversion Tracking

The Beacon also tracks when leads become customers, closing the loop on content ROI.

The Attribution Flow

1. Content published → You post via Kitoro
2. Engagement captured → Someone comments/DMs, Kitoro captures their email
3. Lead created → They’re added to CRM with source_post_id
4. Conversion tracked → They sign up, you call the Beacon API
5. Revenue attributed → Kitoro traces back to the original post

Result: “This LinkedIn post generated $4,200 from 3 customers.”

Quick Start

Add this to your signup handler:

// After successful signup
fetch('https://YOUR_SUPABASE_URL/functions/v1/beacon-conversion', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Beacon-Key': 'kit_pub_YOUR_KEY_HERE'
  },
  body: JSON.stringify({
    email: user.email,
    event: 'signup',
    deal_value: 99 // optional
  })
}).catch(console.error);

API Reference

Endpoint: POST /functions/v1/beacon-conversion

Headers:

• Content-Type: application/json
• X-Beacon-Key: kit_pub_xxx (from Settings)

Body:

{
  "email": "user@example.com",
  "event": "signup",
  "deal_value": 99
}

Field	Required	Description
email	Yes	Customer’s email
event	No	signup, purchase, or upgrade
deal_value	No	Revenue amount

Response:

// Contact found in CRM
{ "success": true, "matched": true, "has_attribution": true }

// Email not in CRM (direct signup, not from content)
{ "success": true, "matched": false }

Code Examples

JavaScript / React / Next.js:

async function trackConversion(email, event = 'signup', dealValue) {
  try {
    await fetch(process.env.BEACON_URL + '/functions/v1/beacon-conversion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Beacon-Key': process.env.KITORO_BEACON_KEY
      },
      body: JSON.stringify({ email, event, deal_value: dealValue })
    });
  } catch (error) {
    console.error('Kitoro tracking failed:', error);
  }
}

Python / Django:

import requests
import os

def track_conversion(email, event='signup', deal_value=None):
    try:
        requests.post(
            os.environ['BEACON_URL'] + '/functions/v1/beacon-conversion',
            headers={
                'Content-Type': 'application/json',
                'X-Beacon-Key': os.environ['KITORO_BEACON_KEY']
            },
            json={'email': email, 'event': event, 'deal_value': deal_value},
            timeout=5
        )
    except Exception as e:
        print(f'Kitoro tracking failed: {e}')

Ruby / Rails:

class KitoroTracker
  def self.track_conversion(email:, event: 'signup', deal_value: nil)
    HTTParty.post(
      ENV['BEACON_URL'] + '/functions/v1/beacon-conversion',
      headers: {
        'Content-Type' => 'application/json',
        'X-Beacon-Key' => ENV['KITORO_BEACON_KEY']
      },
      body: { email: email, event: event, deal_value: deal_value }.to_json
    )
  rescue => e
    Rails.logger.warn "Kitoro tracking failed: #{e.message}"
  end
end

Best Practices

For the Widget:

• Keep your Library well-stocked so Atlas can answer questions
• Set up offline hours if you want contact form instead of live chat at night
• Use your brand color for recognition

For Conversion Tracking:

• Call after successful signup (not before)
• Make it async - don’t block the signup flow
• Catch errors - tracking failure shouldn’t break signups
• Store API key in environment variables

FAQ

Q: What if Atlas can’t answer a question? A: Atlas flags it for human review and the ticket appears in your Support queue.

Q: Does the widget slow down my site? A: No, it loads asynchronously and is under 50KB.

Q: What if someone signs up without engaging with content first? A: The conversion is recorded with matched: false. You see it in metrics but it won’t attribute to any content.