Social Intents

How to build with Social Intents and Webflow

Social Intents lets support teams handle customer conversations without leaving Microsoft Teams, Slack, or Google Chat. The platform captures leads, answers questions through AI chatbots, and routes inquiries to the right team members while your staff works in familiar collaboration tools.

Connect Social Intents to Webflow through the marketplace app for instant setup, or code embed directly for custom positioning and behavior.

Use the Social Intents app

The Social Intents Live Chat App from the Webflow App Marketplace provides the fastest setup path.

The implementation steps include:

• Install the app from the Webflow marketplace
• Authorize Social Intents to access your Webflow site
• Configure settings through the Social Intents dashboard

The widget appears automatically on your published site without writing code.

After installation, configure the following capabilities through the dashboard:

• Train AI chatbots with ChatGPT, Claude, or Gemini to answer common questions automatically
• Set office hours to control chat availability and scheduling
• Create routing rules to direct conversations to specific team members or channels
• Configure proactive chat invitations triggered by visitor behavior like time on page or exit intent
• Customize branding including colors, fonts, button styles, and widget templates
• Connect collaboration platforms like Microsoft Teams, Slack, Google Chat, or Zoom

Embed the chat widget with custom code

The code embed method gives you control over widget placement and custom styling. Copy your unique snippet from the Social Intents dashboard and paste it into the Webflow custom code sections. This approach works best when you need precise positioning or want to add custom CSS.

Install site-wide by navigating to Project Settings > Custom Code > Footer Code, then paste your snippet to ensure the widget loads on every page. For page-specific deployment, add the snippet to individual page settings or use a Custom Code Embed element positioned within your layout.

Customize widget positioning with CSS by adding code to Webflow's custom code section or embed element:

• Adjust button location using #si-wrapper .silc-btn selectors with !important declarations for bottom, right, height, and width properties
• Control chat window placement by targeting #siWidget-chat with bottom, right, height, and width properties
• Replace the default button by overriding background-image on .silc-btn-button with background-size and background-color properties
• Modify typography and colors using Google Fonts and custom color values on element IDs like #title-text, .si-comment-wrapper-user .si-comment, and body styles

What you can build

Integrating Social Intents with Webflow routes customer support conversations directly into your team's existing collaboration tools like Microsoft Teams, Slack, Google Chat, or Zoom.

• SaaS product sites with lead qualification: Build landing pages where AI chatbots powered by ChatGPT, Claude, or Gemini engage visitors, answer product questions, and connect qualified leads with sales teams through Microsoft Teams channels, Slack, or other collaboration platforms
• E-commerce stores with cart abandonment intervention: Create shopping experiences where proactive chat triggers engage visitors viewing product pages for extended periods, offering instant answers about shipping, sizing, or customization options while support teams monitor conversations directly from Slack
• Educational institution sites with 24/7 student support: Design program pages where prospective and current students get instant answers about financial aid, course registration, and campus services through AI chatbot automation, with direct transfer to human advisors during business hours
• Agency client sites with white-label support: Use Social Intents' Agency plan to offer branded chat solutions across client portfolios with unlimited agents, routing conversations to dedicated Microsoft Teams, Slack, and Google Chat channels