Add Live Chat to Framer

Framer:  Add Live Chat to your Framer Website

Framer is a web design tool that allows creators to build visually stunning, interactive websites without coding. By integrating Live Chat by Social Intents, Framer users can easily add real-time visitor engagement and AI-powered chatbot functionality to enhance user experience and drive conversions on their websites.

How to Add Social Intents Live Chat and AI Chatbots to Framer

Adding Live Chat to your Framer website is a powerful way to connect with visitors in real-time. With the option to create an AI-powered chatbot, you can automate responses to frequently asked questions, making it easy to engage with users and provide support 24/7. Let’s dive into the steps.

Step 1: Get Your Social Intents Live Chat Code

  1. Log into Your Social Intents Account: Head to Social Intents and log in to your dashboard. If you don’t have an account, sign up and follow the onboarding steps to create your live chat widget.
  2. Copy the Embed Code: In your Social Intents dashboard, find the “Embed Code” section under your chat widget settings. This code snippet allows the chat widget to display on your site. Copy the code to your clipboard.

Frame Live Chat Code Snippet

Then copy your Live Chat code snippet for use in your Framer website:

Copy Framer Live Chat Code Snippet

Step 2: Open Your Framer Project

  1. Log into Framer: Access Framer and open your project.
  2. Go to Embed Settings: Within the Framer editor, select the page you want to add live chat to.  Hover next t the page name and click on the 3 dot icon. Framer Live Chat Settings
  3. Open Code Settings: Locate the Code section within the page’s settings. This is where you can add custom HTML or JavaScript code to embed third-party tools like Social Intents.

Step 3: Add the Social Intents Code Snippet to Framer

  1. Paste the Code in the Custom Code Section:
    • Within the Custom Code area, paste the Social Intents code snippet you copied earlier.  Use the Start of <head> tag area.  Note that you will need a paid plan for this option.Framer Live Chat Custom Code
    • Adding it to the header tag ensures that the chat widget appears on every page, providing consistent access to visitors no matter where they are on your site.
  2. Save and Publish:
    • Once the code is added, click Save and then Publish to make the live chat widget live on your Framer site.
  3. Verify the Chat Widget:
    • Open your published Framer site in a new tab or refresh an existing one to ensure the chat widget appears as expected—usually in the bottom right corner of the page.

Step 4: Enable AI-Powered Chatbot to Automate Visitor Support

With Social Intents, you can set up an AI chatbot to automatically respond to visitor questions based on common queries or provide support even when you’re offline. Here’s how to configure it:

  1. Access the AI Chatbot Setup in Social Intents:
    • In your Social Intents dashboard, navigate to the AI Chatbot or Chatbot Settings section.
    • Select “Enable AI Chatbot” to start setting up automated responses.
  2. Train the AI on Common Questions:
    • You can provide the AI with specific knowledge bases or frequently asked questions about your product or service. Social Intents allows you to customize responses, ensuring your chatbot can handle customer inquiries accurately and reduce repetitive questions.
    • If you want to train the bot with custom data, you can upload documents or input FAQs directly into the chatbot settings.
  3. Test the Chatbot:
    • After setting up the chatbot, test it by asking common visitor questions to ensure the responses are accurate. Social Intents’ AI chatbot is powered by advanced natural language processing, making it easy to answer complex questions and guide visitors.
  4. Enable Handoff to a Human Agent:
    • If a visitor’s question is too complex, you can set up the chatbot to transfer the conversation to a live agent seamlessly, creating a hybrid AI-human support experience.

Benefits of Using Social Intents Live Chat and AI Chatbots in Framer

Adding Social Intents Live Chat with an AI-powered chatbot to Framer provides numerous benefits, including:

  • 24/7 Visitor Engagement: With the AI chatbot, visitors can get answers at any time, even outside of business hours.
  • Instant Responses to FAQs: Common questions are handled automatically, saving time and ensuring users get the information they need quickly.
  • Increased Conversions: Live chat and AI engagement help capture leads and drive subscriptions by creating a highly interactive experience.
  • Seamless Handoff to Human Support: When a live agent is needed, the chatbot can transfer conversations, maintaining a smooth visitor experience.

By following these steps, you’re ready to bring the power of real-time live chat and intelligent AI-driven support to your Framer website, making it easier than ever to engage with and assist your visitors.