Turna Documentation

Everything you need to integrate and use Turna AI Customer Support on your website

Getting Started

Get up and running with Turna in just a few steps. Follow this guide to integrate the widget on your website.

Step 1: Sign Up

  1. Visit the Turna dashboard
  2. Create an account using email/password or social login
  3. Sign in to your new account

Step 2: Organization Setup

  1. After signing in, create or select an organization
  2. Your organization represents your business
  3. You'll receive a unique Organization ID for widget integration

Step 3: Get Your Organization ID

  1. Navigate to "Integrations" in your dashboard
  2. Your Organization ID will be displayed at the top
  3. Copy this ID - you'll need it for the widget code

Step 4: Choose Your Plan

By default, you start on the Free Plan (50 conversations/month, manual responses only). To unlock AI features and voice support, upgrade to Pro ($59/month) or Enterprise (custom pricing).

Quick Start Guide

Get your widget live in 5 minutes with this simple setup process.

1. Copy Your Widget Code

<script data-organization-id="YOUR_ORGANIZATION_ID" data-theme-color="#3b82f6" src="https://d341yq9hp3d87h.cloudfront.net/widget.js"> </script>

2. Paste Before Closing </body> Tag

Add the script snippet just before the closing </body> tag in your website's HTML.

3. Customize Your Widget

Go to "Customization" in your dashboard and configure:

  • Greeting message
  • Widget colors
  • Welcome heading
  • Suggested prompts

4. Test It

Visit your website and click the chat button in the bottom-right corner to test your widget!

Integration Instructions

Basic Integration (All Platforms)

The widget works with any website. Simply add this script tag to your HTML:

<script data-organization-id="YOUR_ORG_ID" data-theme-color="#3b82f6" data-position="bottom-right" src="https://d341yq9hp3d87h.cloudfront.net/widget.js"> </script>

Attributes:

  • data-organization-id - Your unique organization ID (required)
  • data-theme-color - Widget color (optional, default: #3b82f6)
  • data-position - "bottom-right" or "bottom-left" (optional, default: bottom-right)

Platform-Specific Instructions

HTML Websites

  1. Open your HTML file
  2. Find the </body> tag
  3. Paste the script just before it
  4. Save and upload to your server

React Applications

  1. Open your public/index.html file
  2. Add the script before </body>
  3. Or use React Helmet for dynamic loading

Next.js Applications

Add to your layout file (app/layout.tsx or pages/_app.tsx):

import Script from 'next/script' <Script src="https://d341yq9hp3d87h.cloudfront.net/widget.js" data-organization-id="YOUR_ORG_ID" data-theme-color="#3b82f6" />

WordPress

  1. Go to Appearance → Theme Editor
  2. Edit footer.php
  3. Add script before </body>
  4. Or use a plugin like "Insert Headers and Footers"

Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit Code
  3. Edit theme.liquid
  4. Add script before </body>
  5. Save changes

Webflow

  1. Go to Project Settings → Custom Code
  2. Paste script in Footer Code
  3. Publish your site

Customization Guide

Customize the widget appearance and behavior to match your brand from your dashboard.

Widget Color

Choose your brand color. Affects button, headers, and accents. Use hex format (e.g., #3b82f6).

Greeting Message

First message visitors see. Keep it friendly and helpful. Example: "Hi! How can we help you today?"

Widget Heading

Set the main title and subtitle. Example: "Customer Support" / "We typically reply in minutes"

Suggested Prompts

Up to 3 quick-access buttons. Help guide common inquiries like "Track my order" or "Pricing information".

Widget Position

Choose bottom-right (default) or bottom-left positioning via script attribute.

Vapi Settings (Pro+)

Configure Assistant ID and phone number for voice support integration.

Voice Support (Vapi Integration)

Pro Plan Required: Voice support is available on Pro ($59/month) and Enterprise plans.

What is Vapi?

Vapi is a voice AI platform that enables phone calls and voice conversations in your widget. Customers can make voice calls directly from the widget or speak to an AI assistant.

Setup Steps

Step 1: Get Vapi Account

  1. Sign up at vapi.ai
  2. Create your AI assistant
  3. Get your Assistant ID
  4. Configure your phone number (optional)

Step 2: Configure in Turna

  1. Go to Dashboard → Plugins
  2. Select "Vapi" integration
  3. Enter your Vapi API Key
  4. Click "Save"

Step 3: Add Voice Settings

  1. Go to Dashboard → Customization
  2. Scroll to "Vapi Settings"
  3. Enter Assistant ID
  4. Enter Phone Number (optional)
  5. Save changes

Step 4: Test Voice Support

  1. Visit your website
  2. Open the widget
  3. Click "Voice Support" or phone icon
  4. Test the voice call functionality

Voice Features

  • ✓In-browser voice calls (no phone required)
  • ✓Traditional phone call support
  • ✓AI voice responses
  • ✓Human operator escalation
  • ✓Call recording and transcripts
  • ✓Multiple language support

JavaScript API Reference

The widget exposes a JavaScript API for programmatic control.

Initialization

The widget auto-initializes when the script loads. Access via:

window.TurnaWidget

Available Methods

TurnaWidget.show()

Opens the widget programmatically

document.getElementById('help-button').addEventListener('click', () => { window.TurnaWidget.show(); });

TurnaWidget.hide()

Closes the widget programmatically

window.TurnaWidget.hide();

TurnaWidget.destroy()

Completely removes the widget from the page

window.TurnaWidget.destroy();

TurnaWidget.init(config)

Reinitialize widget with new configuration

window.TurnaWidget.init({ organizationId: 'new-org-id', themeColor: '#ff0000', position: 'bottom-left' });

Troubleshooting

Widget Not Appearing on Website

If the widget doesn't show up after adding the script:

  • • Check Organization ID is correct
  • • Verify script tag is before </body>
  • • Clear browser cache and hard refresh (Ctrl+F5)
  • • Check browser console for JavaScript errors
  • • Verify no ad blockers are blocking the script

AI Responses Not Working

If the widget works but AI doesn't respond:

  • • Verify you're on Pro or Enterprise plan (Free doesn't include AI)
  • • Check subscription status in Billing
  • • Verify conversation limit not exceeded
  • • Contact support if issue persists

Voice Calls Not Working

If voice button appears but calls fail:

  • • Verify Vapi plugin is configured correctly
  • • Check Assistant ID is entered in Customization
  • • Ensure microphone permissions are granted
  • • Verify API key is valid
  • • Check browser supports WebRTC

Customization Not Updating

If changes in dashboard don't reflect on website:

  • • Click "Save Settings" after making changes
  • • Clear browser cache
  • • Hard refresh website (Ctrl+F5)
  • • Wait 1-2 minutes for CDN propagation
  • • Verify correct organization selected

Frequently Asked Questions

Do I need coding skills to use Turna?

No! Just copy and paste one line of code into your website. No coding skills required.

Does Turna work with my website platform?

Yes! Turna works with any website: HTML, WordPress, Shopify, React, Next.js, Wix, Squarespace, and more.

Can I try Turna before paying?

Yes! Start with our Free plan (50 conversations/month) with no credit card required. To try the Pro plan, you can start a 7-day free trial.

How long does setup take?

5 minutes or less! Sign up, get your code, paste it on your website, and you're done.

Can I customize the widget appearance?

Yes! Customize colors, messages, position, and suggested prompts to match your brand.

Does Turna slow down my website?

No! The widget loads asynchronously and doesn't affect page load times.

Can human operators take over conversations?

Yes! Customers can escalate to human support, and operators can respond through the dashboard.

Where can I get more help?

Contact us at info@turnables.tech or visit your dashboard for support.

Need More Help?

Our support team is here to help you get started with Turna

Contact SupportGo to Dashboard