Installation Script

Docs

Installation Script

Complete guide to adding Chat4.shop to your website. Universal JavaScript snippet that works everywhere.

The Chat4.shop installation script is a lightweight JavaScript snippet that brings your forms, modals, and chatbot to life on your website. 🚀

The Basic Script

Here's what it looks like:

<script
  src="https://chat4.shop/embed.js"
  data-project-id="proj_your_unique_id"
  data-api-key="your_api_key">
</script>

That's it! This one script loads everything for your project.

Where to Add It

Best Practice: Before `</body>`

Place the script just before the closing </body> tag in your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->
 
  <!-- Chat4.shop Script -->
  <script src="https://chat4.shop/embed.js"
    data-project-id="proj_abc123"
    data-api-key="sk_live_xyz789"></script>
</body>
</html>

Why before </body>?

Page content loads first (faster perceived speed)
Ensures DOM is ready
Better SEO
Industry standard

Alternative: In `<head>` with Async

For advanced users:

<head>
  <script async src="https://chat4.shop/embed.js"
    data-project-id="proj_abc123"></script>
</head>

The async attribute ensures it doesn't block page rendering.

Installation Methods

Method 1: Global Project Installation (Recommended)

Install once, works for all forms/modals/chatbots in that project:

<script
  src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123">
</script>

Loads:

All active forms
All active modals (with correct triggers)
Your chatbot (if configured)

Best for:

Most websites
Consistent experience
Easy management

Load only specific widgets:

Single Form:

<script src="https://chat4.shop/embed.js"
  data-form-id="form_xyz789"></script>

Single Modal:

<script src="https://chat4.shop/embed.js"
  data-modal-id="modal_abc456"></script>

Chatbot Only:

<script src="https://chat4.shop/embed.js"
  data-chatbot-id="chat_def123"></script>

Best for:

Landing pages (one specific form)
A/B testing
Selective deployment

Method 3: Multiple Widgets

Mix and match:

<script
  src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123"
  data-form-id="form_xyz789"
  data-modal-id="modal_abc456"
  data-chatbot-enabled="true">
</script>

Configuration Options

Customize behavior with data attributes:

Display Options

<script src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123"
  data-theme="auto"
  data-position="bottom-right"
  data-language="en">
</script>

Available Options:

data-theme

light: Light mode colors
dark: Dark mode colors
auto: Matches system preference (default)

data-position (for chatbot)

bottom-right (default)
bottom-left
top-right
top-left

data-language

en: English (default)
es: Spanish
fr: French
de: German
it: Italian
pt: Portuguese
... (50+ languages)

Performance Options

<script src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123"
  data-lazy-load="true"
  data-preload="false">
</script>

data-lazy-load

true: Load when widget becomes visible
false: Load immediately (default)

data-preload

true: Preload resources (faster widget display)
false: Load on-demand (default)

Privacy Options

<script src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123"
  data-cookie-consent="required"
  data-gdpr-mode="true">
</script>

data-cookie-consent

required: Wait for consent before loading
optional: Load immediately (default)

data-gdpr-mode

true: Enhanced privacy mode
false: Standard mode (default)

Platform-Specific Installation

WordPress

Option 1: Header/Footer Plugin

Install "Insert Headers and Footers" plugin
Paste script in footer section
Save

Option 2: Theme Editor

Appearance → Theme Editor
Open footer.php
Find </body> tag
Paste script above it
Update file

Option 3: Custom HTML Widget

Appearance → Widgets
Add "Custom HTML" widget to footer
Paste script
Save

Detailed WordPress guide →

Shopify

Online Store → Themes
Click "..." → Edit Code
Open theme.liquid
Find </body> (usually near bottom)
Paste script above it
Save

Detailed Shopify guide →

Custom HTML

Direct edit of your HTML files:

Open HTML file in editor
Find </body> tag
Paste script above it
Save and upload

Detailed custom site guide →

Verifying Installation

Add the Script

Install using one of the methods above.

Visit Your Website

Open your site in a browser (use incognito/private mode for clean test).

Open Developer Console

Chrome/Edge: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Firefox: Press F12 or Ctrl+Shift+K (Windows) / Cmd+Option+K (Mac)
Safari: Enable Developer Menu → Develop → Show JavaScript Console

Check Console Messages

Look for:

✓ Chat4.shop v2.1.0 loaded successfully
✓ Project: proj_abc123
✓ Widgets: 2 forms, 1 modal, 1 chatbot

If you see errors, see Troubleshooting below.

Test Widgets

Forms: Should display on page
Modals: Should trigger based on settings
Chatbot: Chat bubble should appear

Troubleshooting

Script Not Loading

Error: "Failed to load resource"

Possible causes:

Typo in URL
Internet connection issue
Firewall/ad blocker
Server issue (check status.chat4.shop)

Solution:

Verify URL is exactly: https://chat4.shop/embed.js
Check browser console for details
Try different browser
Contact support if persistent

Invalid API Key

Error: "Authentication failed: Invalid API key"

Solution:

Copy API key from dashboard (Settings → API Keys)
Make sure you copied the entire key
Regenerate if compromised
Update script with new key

Widgets Not Showing

Forms not appearing:

Check if form is set to "Active" in dashboard
Verify data-form-id is correct
Look for CSS conflicts (use browser inspector)
Check if form has display conditions

Modals not triggering:

Check trigger settings (exit intent, scroll, time delay)
Verify modal is "Published"
May need to wait for trigger condition
Test with "On page load" trigger

Chatbot not visible:

Ensure chatbot is "Published" in settings
Check position (might be off-screen)
Look for CSS z-index conflicts
Verify training data exists

Performance Issues

Page loading slowly:

Most likely NOT Chat4.shop (script is only ~40KB compressed).

Check:

Other scripts/plugins (some are 1MB+)
Large images
Server response time
Use tools: Google PageSpeed Insights

Optimize Chat4.shop:

<script async defer src="https://chat4.shop/embed.js"
  data-project-id="proj_abc123"
  data-lazy-load="true">
</script>

CORS Errors

Error: "Cross-Origin Request Blocked"

Solution:

Go to Project Settings → Security
Add your domain to "Allowed Origins"
Save changes
Clear cache and test

Security Best Practices

Keep API Keys Secure

DO:

✅ Use in public website HTML (it's safe - domain restricted)
✅ Regenerate if compromised
✅ Set allowed domains

DON'T:

❌ Share in public repositories (use environment variables)
❌ Use same key across multiple projects
❌ Include in public documentation

Domain Restrictions

Lock down your widgets:

Settings → Security → Allowed Domains

Add your domains:

https://example.com
https://www.example.com
https://shop.example.com

Widgets only work on listed domains

Pro Tip: Add both www and non-www versions of your domain!

Content Security Policy (CSP)

If your site uses CSP headers, add:

Content-Security-Policy:
  script-src 'self' https://chat4.shop;
  connect-src 'self' https://api.chat4.shop;
  frame-src 'self' https://chat4.shop;

Advanced Usage

Programmatic Control

Control widgets with JavaScript:

Show/Hide Chatbot:

// Hide chatbot
window.Chat4Shop.chatbot.hide();
 
// Show chatbot
window.Chat4Shop.chatbot.show();
 
// Toggle
window.Chat4Shop.chatbot.toggle();

Open/Close Modal:

// Open specific modal
window.Chat4Shop.modal.open('modal_abc123');
 
// Close all modals
window.Chat4Shop.modal.close();

Trigger Form:

// Open form in modal
window.Chat4Shop.form.openModal('form_xyz789');

Event Listeners

React to widget events:

// Listen for form submissions
window.addEventListener('chat4shop:form:submitted', (event) => {
  console.log('Form submitted:', event.detail);
  // Send to analytics, show thank you, etc.
});
 
// Listen for chat messages
window.addEventListener('chat4shop:chat:message', (event) => {
  console.log('Chat message:', event.detail);
});
 
// Listen for modal views
window.addEventListener('chat4shop:modal:viewed', (event) => {
  console.log('Modal viewed:', event.detail);
});

Custom Styling

Override default styles:

/* Customize chatbot button */
.chat4shop-chatbot-button {
  background-color: #ff6b6b !important;
  border-radius: 50% !important;
}
 
/* Customize form inputs */
.chat4shop-form-input {
  border: 2px solid #4ecdc4 !important;
  border-radius: 8px !important;
}
 
/* Customize modal */
.chat4shop-modal-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

Use !important to override default styles. Future updates may change class names.

Next Steps

WordPress Integration

Step-by-step WordPress guide

Shopify Integration

Complete Shopify installation

Create Your First Form

Build a form to embed

Set Up Chatbot

Train and deploy AI chat

Installation is simple, but powerful! Now make your website interactive! 🚀✨

AI Chatbot Installation

Installation Script

The Basic Script

Where to Add It

Best Practice: Before </body>

Alternative: In <head> with Async

Installation Methods

Method 1: Global Project Installation (Recommended)

Method 2: Specific Widget

Method 3: Multiple Widgets

Configuration Options

Display Options

Performance Options

Privacy Options

Platform-Specific Installation

WordPress

Shopify

Custom HTML

Verifying Installation

Add the Script

Visit Your Website

Open Developer Console

Check Console Messages

Test Widgets

Troubleshooting

Script Not Loading

Invalid API Key

Widgets Not Showing

Performance Issues

CORS Errors

Security Best Practices

Keep API Keys Secure

Domain Restrictions

Content Security Policy (CSP)

Advanced Usage

Programmatic Control

Event Listeners

Custom Styling

Next Steps

WordPress Integration

Shopify Integration

Create Your First Form

Set Up Chatbot

Best Practice: Before `</body>`

Alternative: In `<head>` with Async