Documentation

Everything you need to know about VistaChat. From getting started to advanced integrations, find comprehensive guides and API references.

Getting Started

Quick setup guide for new users

Installation

Step-by-step widget installation

Customization

Customize appearance and behavior

API Reference

Developer API documentation

Troubleshooting

Common issues and solutions

Best Practices

Tips for success with live chat

Getting Started

Welcome to VistaChat! This guide will help you get up and running with our live chat widget in just a few minutes.

Prerequisites

Before you begin, make sure you have:

  • A website where you want to add the chat widget
  • Basic HTML knowledge (or access to your website's code)
  • A VistaChat account (sign up at app.vistachat.com/register)

Quick Setup

Sign up for VistaChat
Create your free account at app.vistachat.com/register
Customize your widget
Choose colors, position, and greeting message in your dashboard
Get your embed code
Copy the JavaScript snippet from your dashboard
Add to your website
Paste the code before the closing </body> tag on every page

Installation Guide

Basic Installation

Add this code to your website's HTML, just before the closing </body> tag:

<script>
(function() {
  var chat = document.createElement('script');
  chat.src = 'https://widget.vistachat.com/chat.js';
  chat.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
  document.head.appendChild(chat);
})();
</script>

WordPress Installation

Install a plugin
Use "Insert Headers and Footers" or "WP Code" plugin
Add the code
Paste your VistaChat embed code in the footer section
Save and test
Visit your site to see the chat widget appear

Shopify Installation

Go to Online Store
Navigate to Themes → Customize in your Shopify admin
Add custom code
Add the VistaChat script to your theme's layout file

Customization Options

VistaChat offers extensive customization options to match your brand and user experience needs.

Appearance

Customize colors, fonts, size, and positioning of your chat widget.

Branding

Remove VistaChat branding with the Expert plan for a fully white-labeled experience.

Messages

Customize greeting messages, offline messages, and automated responses.

Behavior

Control when the widget appears, auto-opening behavior, and user interaction settings.

Advanced Customization

Use our JavaScript API for advanced customization:

// Hide the widget on mobile
if (window.innerWidth < 768) {
  VistaChat.hide();
}

// Show widget after 30 seconds
setTimeout(function() {
  VistaChat.show();
}, 30000);

API Reference

Integrate VistaChat programmatically using our REST API and webhooks.

Authentication

All API requests require authentication using your API key:

curl -H "Authorization: Bearer YOUR_API_KEY" \
  https://api.vistachat.com/v1/conversations

Core Endpoints

GET /v1/conversations
Retrieve all conversations
GET /v1/conversations/{id}
Get specific conversation details
POST /v1/messages
Send a message
PUT /v1/widget
Update widget settings

Webhooks

Receive real-time notifications for chat events:

  • message.received - New message from visitor
  • conversation.started - New conversation initiated
  • agent.joined - Agent joined the conversation
  • conversation.ended - Conversation closed

Troubleshooting

Widget Not Appearing

  • Check that the script is placed before the closing </body> tag
  • Verify your widget ID is correct
  • Ensure your website allows external scripts
  • Check browser console for JavaScript errors

Messages Not Sending

  • Check your internet connection
  • Verify your account is active and not suspended
  • Ensure you're within your plan's message limits
  • Try refreshing the page

Styling Conflicts

  • Use the !important declaration for custom CSS
  • Ensure your CSS loads after the VistaChat script
  • Use specific selectors to override default styles

Best Practices

Response Times

Aim to respond within 30 seconds during business hours and within 2 hours outside business hours.

Greeting Messages

Use personalized greetings like "Hi there! Thanks for visiting our site. How can we help you today?"

Availability Settings

Set clear business hours and use automated offline messages to manage expectations.

Proactive Engagement

Use proactive chat invitations for high-value pages or when visitors spend significant time on your site.

Need More Help?

Can't find what you're looking for? Our support team is here to help.

Contact Support
Scroll to top