Website Integration
Learn how to add Chat4.shop to your website in minutes. Works with any platform!
Adding Chat4.shop to your website is simple: just copy and paste a script tag. No developer required! π
How It Works
Chat4.shop uses a lightweight JavaScript snippet that you add to your website. This snippet:
- Loads only when needed - Won't slow down your site
- Works everywhere - Any website that runs JavaScript
- Auto-updates - We improve features without you lifting a finger
- Secure - HTTPS encrypted, privacy-focused
The Script Tag
After creating a form, modal, or chatbot, you'll get a script tag that looks like this:
<script
src="https://chat4.shop/embed.js"
data-project-id="your-project-id"
data-api-key="your-api-key">
</script>Don't share your API key publicly! Each project has a unique, secure API key. Treat it like a password.
Where to Add the Script
The script should go in your website's HTML, ideally just before the closing </body> tag.
Why before </body>?
- Ensures your page content loads first
- Better performance
- Standard best practice
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Add Chat4.shop script here, before </body> -->
<script src="https://chat4.shop/embed.js" data-project-id="..."></script>
</body>
</html>Platform-Specific Guides
Choose your platform for detailed instructions:
Quick Install Methods
Method 1: Global Installation (Recommended)
Install once, works on all forms/modals/chatbots in that project:
<script
src="https://chat4.shop/embed.js"
data-project-id="proj_abc123">
</script>This automatically loads all active widgets for your project.
Method 2: Specific Widget
Install only a specific form, modal, or chatbot:
<script
src="https://chat4.shop/embed.js"
data-form-id="form_xyz789">
</script>Use when you only want one specific widget to show.
Testing Your Installation
Add the Script
Copy the script from your Chat4.shop dashboard and paste it into your website.
Save/Publish
Save your changes and publish your website (if using a CMS).
Visit Your Site
Open your website in a browser.
Check for Widgets
- Forms: Should appear where you placed them
- Modals: Should popup based on trigger settings
- Chatbot: Should appear as a chat bubble (usually bottom-right)
Open Browser Console
Press F12 (or Cmd+Option+I on Mac) and check the Console tab.
Look for:
β Chat4.shop loaded successfully
If you see errors, see Troubleshooting below.
Advanced Configuration
Custom Settings
You can customize behavior using data attributes:
<script
src="https://chat4.shop/embed.js"
data-project-id="proj_abc123"
data-position="bottom-right"
data-theme="light"
data-language="en">
</script>Available options:
data-position:bottom-right,bottom-left,top-right,top-leftdata-theme:light,dark,autodata-language:en,es,fr,de, etc.
Loading Specific Widgets
Mix and match:
<!-- Load chatbot and one specific form -->
<script
src="https://chat4.shop/embed.js"
data-project-id="proj_abc123"
data-chatbot-id="chat_def456"
data-form-id="form_ghi789">
</script>Troubleshooting
Script Not Loading?
Check the browser console (F12)
Common errors:
"Failed to load resource"
- Check your internet connection
- Verify the script URL is correct
- Make sure you're not blocking scripts
"Invalid API key"
- Double-check you copied the entire script
- Regenerate API key in project settings
"Project not found"
- Make sure the project exists and is active
- Check you're using the correct project ID
Widgets Not Appearing?
Forms
- Check if the form is set to "Active" in dashboard
- Verify the form ID is correct
- Look for CSS conflicts hiding the form
Modals
- Check trigger conditions (might not trigger immediately)
- Verify modal is published and active
- Try setting trigger to "On page load" for testing
Chatbot
- Make sure chatbot is trained and published
- Check if it's hidden by CSS
z-indexissues - Verify position settings
Performance Issues?
The Chat4.shop script is tiny (< 50KB), but if you notice slowdowns:
-
Use async loading:
<script async src="https://chat4.shop/embed.js" ...></script> -
Load conditionally: Only load on pages where you need it
-
Check other scripts: Chat4.shop is rarely the culprit - check other plugins
Security & Privacy
Is it Safe?
Yes! Chat4.shop:
- β Uses HTTPS encryption
- β Doesn't track users without consent
- β GDPR compliant
- β No data selling ever
- β Regular security audits
Data Collection
Chat4.shop only collects:
- Form submissions (what users explicitly submit)
- Chat conversations (with AI chatbot)
- Basic analytics (page views, clicks)
We never collect:
- β Passwords or payment info
- β Personal data without consent
- β Browsing history from other sites
Removing Chat4.shop
To uninstall:
- Remove the script tag from your website
- Clear your browser cache
- Done! All widgets disappear immediately
Your data stays in your Chat4.shop dashboard unless you delete it.
Next Steps
Need help with installation? Email support@chat4.shop - we usually respond within a few hours! πͺ