Tawk.to Dashboard Configuration Guide

Shanghai Wonder Tours | Property ID: 6a7221676677831d43f6c037 | Widget: 1jv6t4vgs

API Key (Secure Mode): 3e4a97c698741711b5857e136e1f5ad3a5939d5b
Status: JavaScript API DONE | Dashboard Settings MANUAL

1. Welcome Messages Dashboard

Configure greeting messages that visitors see when they open the chat widget.

Path: Settings → Chat Widget → Content

Online Welcome Message

Set the message visitors see when agents are online:

"Welcome to Shanghai Wonder Tours! 🏮
We're here to help you plan your perfect Shanghai adventure.
Ask us about private tours, water town trips, or custom itineraries!"

Offline Welcome Message

Set the message visitors see when agents are offline:

"Thanks for visiting Shanghai Wonder Tours! 🏮
We're currently offline, but please leave us a message and we'll get back to you within 24 hours.
For urgent matters, WhatsApp: +86 15347723823"

Channel Description

"Shanghai Wonder Tours - Expert local guides for private Shanghai tours, water town trips, and customized China travel experiences."

2. Branding & Appearance Dashboard

Customize the chat widget to match the Shanghai Wonder Tours brand.

Path: Settings → Chat Widget → Appearance

SettingValue
Widget TitleShanghai Wonder Tours
Primary Color (Header)#C8102E (Shanghai Red)
Background Color#FFFFFF
Text Color#333333
Font FamilyInter, sans-serif
Border Radius8px
Widget PositionBottom Right
Widget StyleModern / Rounded

Logo

Upload the Shanghai Wonder Tours logo (recommended: 200x200px PNG with transparent background). Use the red lantern icon (🏮) as favicon if no logo is available.

Chat Bubble

SettingValue
Bubble TypeText + Icon
Bubble TextChat with us
Bubble Color#C8102E
Bubble PositionBottom Right
Offset X20px
Offset Y20px

Path: Settings → Chat Widget → Advanced

Custom CSS (optional)

Add custom CSS to further style the widget:

/* Match brand colors */ #tawkchat-container .header-text { font-weight: 600 !important; } .widgetHeader { background-color: #c8102e !important; }

3. Pre-chat Form Dashboard

Collect visitor information before they start a chat.

Path: Settings → Chat Widget → Pre-Chat Form

Enable Pre-chat Form: YES

Form Fields

FieldTypeRequiredLabel
NameTextYesYour Name
EmailEmailYesEmail Address
PhoneTextNoPhone / WhatsApp Number
Travel DateTextNoApproximate Travel Date
MessageTextareaNoHow can we help you?

Pre-chat Form Message

"Welcome to Shanghai Wonder Tours! Please fill in your details so we can better assist you with your Shanghai tour plans."

Options

  • Show form when: "Visitor maximizes the widget"
  • Require form: "Before chat begins"
  • Department selection: Enable if you set up departments
Note: The JavaScript API already tracks visitor attributes automatically. The pre-chat form provides additional information for agents.

4. Knowledge Base Dashboard

Create self-service articles that visitors can browse without starting a chat.

Path: Knowledge Base → Articles

Recommended Categories

CategoryDescription
Tour BookingHow to book, payment methods, cancellation policy
Tour TypesPrivate tours, group tours, day trips, multi-day tours
DestinationsShanghai, Suzhou, Hangzhou, Zhujiajiao, Huangshan
Practical InfoVisa, weather, transportation, language tips
Pricing & PaymentTour pricing, deposit, payment methods

Recommended Articles to Create

  1. How to Book a Shanghai Tour - Step-by-step booking guide
  2. Private vs. Group Tours - Which is Right for You?
  3. Top 10 Shanghai Attractions - Must-visit places
  4. Shanghai Day Trips Guide - Suzhou, Hangzhou, water towns
  5. What to Pack for Shanghai - Seasonal packing tips
  6. Visa Requirements for China - Visa-free transit, tourist visa
  7. Best Time to Visit Shanghai - Season-by-season guide
  8. Payment Methods Accepted - PayPal, bank transfer, WeChat Pay
  9. Cancellation & Refund Policy - Cancellation terms
  10. Shanghai Airport Transfer Guide - PVG & SHA airports

Enable Knowledge Base in Widget

  • Path: Settings → Chat Widget → Knowledge Base
  • Toggle: "Show Knowledge Base in chat widget"
  • Select categories to display
  • Set article display order

5. Operating Hours Dashboard

Set when your team is available for live chat.

Path: Settings → Chat Widget → Schedule

Enable Schedule: YES

DayHours (Beijing Time, UTC+8)Hours (UTC)
Monday - Friday9:00 AM - 9:00 PM1:00 AM - 1:00 PM
Saturday10:00 AM - 6:00 PM2:00 AM - 10:00 AM
Sunday10:00 AM - 6:00 PM2:00 AM - 10:00 AM
Timezone: Asia/Shanghai (UTC+8)
Note: Even outside operating hours, visitors can leave messages. The offline welcome message will be displayed.

Outside Operating Hours

  • Show offline form: YES
  • Offline message: "We're currently offline. Please leave a message and we'll respond within 24 hours."
  • Display WhatsApp number: "+86 15347723823"

6. Shortcuts / Auto-Replies Dashboard

Set up quick reply templates for common questions.

Path: Settings → Chat → Shortcuts

ShortcutMessage Content
/welcome "Hi! Welcome to Shanghai Wonder Tours! I'd be happy to help you plan your Shanghai trip. What type of tour are you interested in?"
/price "Our private Shanghai tours start from $89 per person for half-day tours. Full-day tours start from $159. Multi-day packages are also available. Would you like a detailed quote?"
/contact "You can reach us via:\nWhatsApp/Phone: +86 15347723823\nWeChat ID: chinawondertours\nEmail: [email protected]"
/payment "We accept PayPal, bank transfer, and WeChat Pay. A 30% deposit is required to confirm your booking, with the balance due before the tour date."
/cancel "Free cancellation up to 72 hours before your tour. Cancellations within 72 hours are subject to a 50% fee. No-shows are non-refundable."
/languages "Our tours are available in English and Chinese. We can also arrange guides for French, Spanish, German, and Japanese speakers upon request."
/pickup "We offer free hotel pickup within central Shanghai for all private tours. Airport/cruise port pickup is available for an additional fee."
/custom "Yes! All our tours can be customized to your preferences. Tell us your interests, travel dates, and group size, and we'll create a personalized itinerary for you."
/water "Water town tours (Zhujiajiao, Tongli, Zhouzhuang) are available as half-day or full-day trips from Shanghai. They include traditional boat rides, ancient architecture, and local cuisine."
/multiday "Our multi-day tours include 2-5 day packages covering Shanghai + Suzhou, Hangzhou, Huangshan, and more. All include private guide, transportation, and hotels."

7. JavaScript API Configuration Completed

The following features have been implemented in js/tawk-config.js and are already active on all 31 pages:

✅ Visitor Information Tracking

  • Page Type: Homepage, Tours Listing, Tour Detail, Contact, About, FAQ
  • Current Page: Page title automatically captured
  • Page URL: Full URL of current page
  • Language: en (auto-detected from HTML lang attribute)
  • Device: Mobile / Desktop (auto-detected)
  • Traffic Source: Google, Bing, Social Media, Direct, Internal
  • Tour Viewed: Tour name extracted from page heading
  • Website: Shanghai Wonder Tours

✅ Event Tracking

  • page-view:
  • tour-detail-view: Specific event when viewing a tour page
  • chat-widget-opened: When visitor opens the chat
  • booking-intent: When visitor clicks a booking/contact button
  • pdf-download-clicked: When visitor clicks the PDF download button
  • form-submitted: When visitor submits any form
  • contact-channel-clicked: When WhatsApp/WeChat links are clicked
  • chat-ended: When a chat ends, with duration

✅ Chat Lifecycle Callbacks

  • onLoad: Sets visitor attributes and logs page view
  • onStatusChange: Tracks agent online/offline status
  • onChatMaximized: Tracks widget open (sends to Google Analytics)
  • onChatMinimized: Tracks widget close
  • onChatBegin: Tracks when chat begins
  • onChatStart: Tracks when agent responds
  • onChatEnd: Tracks chat end with duration
  • onUnreadCountChanged: Tracks unread messages

✅ Auto-Popup Behavior

  • Tour Detail Pages (Desktop): Auto-opens chat after 30 seconds
  • Homepage (Desktop): Auto-opens chat after 45 seconds
  • Session Memory: Only shows once per session (uses sessionStorage)
  • Mobile: No auto-popup (to avoid disrupting mobile experience)

✅ Google Analytics Integration

All chat events are automatically sent to Google Analytics (GA4) if the gtag function is available. Events tracked:

  • tawk_status_change
  • tawk_chat_opened
  • tawk_chat_minimized
  • tawk_chat_began
  • tawk_chat_started
  • tawk_chat_ended
  • tawk_visitor_message
  • tawk_unread_message

Note: Google Analytics GA4 ID (G-XXXXXXXXXX) still needs to be added to the website for this to work.

API Key Information

API Key: 3e4a97c698741711b5857e136e1f5ad3a5939d5b

This key is found in Tawk.to Dashboard → Profile → REST API Keys. To use the REST API for server-side automation (e.g., automatically creating knowledge base articles, managing agents), you need to:

  1. Go to Tawk.to Dashboard → Profile → REST API
  2. Submit the REST API Access Request Form
  3. Wait for approval (usually 1-3 business days)
  4. Once approved, use the key with HTTP Basic Auth: Authorization: Basic base64(api_key:f)

Base URL: https://api.tawk.to/v1/

Summary

TaskMethodStatus
Visitor Information TrackingJavaScript API✅ Done
Event TrackingJavaScript API✅ Done
Chat Lifecycle CallbacksJavaScript API✅ Done
Auto-Popup BehaviorJavaScript API✅ Done
Google Analytics IntegrationJavaScript API✅ Done (needs GA4 ID)
Welcome MessagesDashboard📋 Manual Setup
Branding & AppearanceDashboard📋 Manual Setup
Pre-chat FormDashboard📋 Manual Setup
Knowledge BaseDashboard📋 Manual Setup
Operating HoursDashboard📋 Manual Setup
Shortcuts / Auto-RepliesDashboard📋 Manual Setup
Next Steps:
  1. Log into Tawk.to Dashboard
  2. Follow the guide above to configure items 1-6
  3. Provide GA4 ID to complete Google Analytics integration
  4. Request REST API access if you want server-side automation
WeChat QR Code

Scan to add us on WeChat