Add Beacon to a Webflow Site

Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code. Beacon provides on demand Docs, chat, and an email contact form rolled into one helpful widget you can plug right into your Webflow site.

If you've built and hosted your site with Webflow and your plan there includes the Embed option, it's as easy as copy and paste to add Beacon to your Webflow site! 

1

Create a new Beacon, or head to the Installation tab for an existing Beacon, and grab the embed code. Just click the Copy button to get that code on your clipboard. 

2

Open your site in the Webflow designer. Click the + in the left navigation to open the Add Elements screen. Scroll down in that list to the Components section, and click Embed. 

3

Paste the Beacon embed code you copied in step 1 into the HTML Embed Code Editor, and click Save & Close at the bottom. 

4

Publish your Webflow site to see the Beacon on your page, and ta-da! That's it — you've added Beacon to your Webflow site!

Note: Webflow doesn't show the embeds in the designer or preview, but it will appear on the published site.

Here's a quick silent movie showing you the whole process with Help Scout and Webflow open in 2 tabs, start to finish!

If you want to try your hand at adding some of the features of the Beacon JavaScript API, you'd pop that code into the same spot in your Webflow site. Check out Advanced Beacon Customization for some ideas on what's possible!