Guides
1. Overview
Applicable Platform: Framer This guide will help you quickly integrate 3Chat AI customer service into your self-built website on the Framer platform, allowing customers to initiate inquiries through the chat window, enhancing conversion rates and customer satisfaction.
If you are not yet a 3Chat user, please visit 3Chat to create an account, and you will receive a 7-day free trial benefit. If you develop a strong interest in our features during the trial period, subscribing to the Growth plan will give you the best functional experience.
2. Preparations Before Installation
Before you start, please ensure:
✅ You are logged into Framer and have built your own website
3. Steps to Operate
1. Obtain the 3Chat Installation Code
Log into the 3Chat backend, and click on 【Channels】→ 【Live Chat】→ 【Custom Website Installation】 in the left navigation bar
Click Copy Code Snippet
2. Enter the Framer Code Editor and Import the 3Chat Code
Enter the Framer editing page
Click the Edit Icon for Home, and then click 【Settings】
In the settings interface, click on 【General】 on the left side
At the bottom of this page, find the 【Custom Code】 section and paste the 3Chat chat tool code copied from the first step into the 【End of <body> tag】 section
Click 【Save】 to take effect.
3. Verify the Effectiveness of the Chat Plugin
If it is effective, the 3Chat chat icon will appear in the lower right corner of your website. Please click the icon to test whether the interaction is successful. If information can be smoothly sent and received, it is considered successful.
4. Frequently Asked Questions
❓ Page style is disrupted after embedding the code?
→ Reason: CSS Selector Conflict
→ Solution:
1 Wrap the 3Chat code in a container <div id="3chat-container">...</div>
Custom CSS Isolation:
css #3chat-container * { all: unset; /* Reset inherited styles */ }
❓ No response when clicking the button on mobile?
→ Turn off Framer's “Interaction Preview” mode (test the official version)
→ Check if “Gesture Conflict” animated components are enabled
5. Further Support
If you need assistance, you can contact:
📧 3Chat Customer Support: 3Chat@xinheyun.com
📞 Framer Technical Support: Enter Framer and go to Help Center to get various help and contact Framer customer service
6. Finally
✅ Congratulations! You have successfully integrated 3Chat intelligent customer service into the website built with Framer!
Now, your customers can directly interact with 3Chat through your Framer-built website, enhancing customer service efficiency!
Address
Building A6, 10th Floor, No. 1528, Gumei Road, Xuhui District
Headquarters · Shanghai
Branches · Singapore · Guangzhou · Chengdu · Hangzhou · Hefei · Nanjing · Shijiazhuang
Telephone