Social Chat Buttons

A Webflow form takes a visitor's question and then everyone waits on email. Nothing in Webflow opens a WhatsApp or Messenger thread straight from the page, so the visitor who wanted an answer in ten seconds usually closes the tab first.

Social Chat Buttons puts a floating chat launcher on your site and fans it out into 15+ messaging channels. Install the app from the Webflow Marketplace and the widget deploys across the site without code. Visitors tap the channel they already use, and the conversation opens in their own app.

The fit is strongest for stores answering pre-purchase questions and for service businesses that live on inbound leads. Agencies roll it out across client sites, and teams selling into several regions use it to meet people on the app that region actually has installed.

How to integrate Social Chat Buttons with Webflow

What is Social Chat Buttons? Social Chat Buttons is a communication app built by Flowstar that adds a floating chat widget to a website. The widget collapses 15+ chat channels into one button, covering WhatsApp, Facebook Messenger, Instagram, Telegram, TikTok, and WeChat.

Teams reach for this pairing when response speed matters more than a ticket queue. A store adds Telegram and Instagram DM buttons to product pages so pre-sales questions get answered before the cart is abandoned. A consultancy sends quick questions to WhatsApp and longer scoping conversations to Telegram from the same contact page.

Pick a setup path based on how much control you want. The Social Chat Buttons app handles placement and script injection for you, with no code involved. Code Embed elements and custom code let you drop a widget script on one page or on every page. The Webflow Data API gives you scripted control over deployment across many sites, at the cost of server-side work. Most sites never need more than the app; the code and API paths exist for page-level control and multi-site rollouts.

Install the Social Chat Buttons app

The app install is the path Flowstar documents, and it needs no code. Its Marketplace listing describes setup as no-code: you add the buttons and configure them from inside Webflow. After install you manage channels, icons, colors, and placement without leaving the site. Use this method unless you have a specific reason to own the script yourself.

To set up the integration:

1. Open the Apps panel on your site.
2. Search for Social Chat Buttons and install it.
3. Authorize the app when Webflow prompts you, which connects it to that site.
4. Choose your channels, then set icons, colors, position, and layout.
5. Publish the site to push the widget live.

Once installed, the app owns the whole widget lifecycle:

• Site-wide deployment: The app injects the widget script for you, so the launcher appears on every page once you publish.
• Channel selection: You choose which of the 15+ supported channels sit in the launcher and in what order they appear.
• Visual configuration: You set icons, colors, launcher position, and layout in the app panel rather than writing CSS.
• Mobile and desktop display: The listing covers both, so the launcher renders on phones as well as full-width screens.

One honest limit sits on top of all that: the app's listing documents no visitor language or region detection, so showing different channel sets to different audiences means configuring pages one at a time. That is where the code paths below earn their extra work.

Add the widget with Code Embed and custom code

The app install is the documented path, so reach for custom code only when you want the script in a specific place. Managing it yourself suits page-level deployments, such as a regional landing page that should offer only the channels people in that region use. Custom code is a paid feature: check the current Workspace and Site plan requirements in the custom code documentation before you plan around it. Flowstar publishes no script snippets or developer docs for the widget, so ask for the code at hi@flowstar.co.

Embed on a single page with a Code Embed element

A Code Embed element drops HTML, CSS, and JavaScript at an exact spot in your layout, which is what you want for a per-page setup such as a product page that offers only two channels.

To add the widget to one page:

1. Copy your widget code to the clipboard.
2. Open the Add panel and drop a Code Embed element onto the canvas.
3. Paste the code, then save and close the modal.

Publish the site and the widget shows up on that page only.

Add the script site-wide in head or body tags

To load the widget everywhere at once, put the script in the site's custom code fields instead. The head and footer fields both accept HTML, CSS inside <style> tags, and JavaScript inside <script> tags.

To deploy site-wide:

1. Go to Site settings > Custom code.
2. Paste the script into the Head code field.
3. Click Save changes, then publish the site.

To scope the script to a single page instead, open Page settings for that page and paste the code into the Before </body> tag field under Custom code.

Build with the Webflow Data API

Social Chat Buttons publishes no API or webhooks of its own, so anything programmatic runs through the Webflow Data API. This path is for agencies pushing one widget script across many client sites, or anyone who needs to answer which scripts are running where. It takes server-side work: per Webflow's docs, only Webflow Apps holding OAuth tokens can call the custom code endpoints, so a site or Workspace token will not get you there, and the app needs the custom code scopes. Authentication uses a bearer token from an OAuth authorization code flow.

Four endpoint groups carry most of the work:

• Custom code endpoints: These register a script and apply it to a whole site or to a single page.
• Pages endpoints: The page list returns every page on a site, so you can target a deployment precisely.
• Custom code blocks: Listing applied blocks shows which scripts are attached to which pages, which is how you audit a client account you inherited.
• Webhooks: Webflow webhooks fire on events such as form_submission, useful if you want chat and form follow-up in one pipeline.

Every call sits on the https://api.webflow.com base URL under the /v2/ namespace.

Register and deploy a widget script

The sequence is the same for one site or a hundred.

To deploy a script through the API:

1. Register the script. Use POST /v2/sites/{site_id}/registered_scripts/inline for inline code, capped at 10,000 characters, or POST /v2/sites/{site_id}/registered_scripts/hosted for a hosted file, which needs a hostedLocation and an integrityHash.
2. Apply it with the Add/Update Custom Code endpoint at /v2/sites/{site_id}/custom_code for the whole site, or /v2/pages/{page_id}/custom_code for one page. Scripts target either the header or the footer.
3. Publish the site. Nothing you register or apply goes live until you do.

The apply call expects the complete list of code blocks for that site or page, so fetch what is already applied and resubmit it alongside the new script, or you will wipe out the scripts you meant to keep. That is the single most common way this breaks. Audit what is running with GET /v2/sites/{site_id}/custom_code/blocks.

What you can build with the Social Chat Buttons Webflow integration

Pairing Social Chat Buttons with Webflow opens direct messaging from any page, without building a chat system or standing up a ticketing tool.

• E-commerce pre-sales support: Put Telegram and Instagram DM buttons on product pages so shoppers get an answer before checkout instead of abandoning the cart.
• Service business contact page: Send quick questions to WhatsApp and detailed project inquiries to Messenger, so every visitor has a one-tap route to a person.
• Multi-region support hub: Offer WhatsApp, Telegram, Instagram, and WeChat buttons on one support page so international visitors reach you on an app they already have installed.
• Agency client rollouts: Deploy the same widget across client sites, then script per-page placement through the Data API custom code endpoints.

For the scripted version of that last one, see how to apply custom code programmatically. And if you already manage several Webflow sites, connect the Webflow MCP server so your AI assistant can audit pages, custom code, SEO settings, and site activity across all of them instead of you clicking through each site by hand.