Guide
Share buttons for Webflow
An Embed element, plus one line in the project footer.
Where they end up: Anywhere you can drop an element, including inside a Collection List.
- 01
Load the script once
Project Settings → Custom Code → Footer Code. Loading it here rather than inside each embed means one request no matter how many kits the page has.
html<script async src="//static.addtosite.com/widget.js"></script>
- 02
Drop in an Embed element
Add an Embed where the buttons belong and paste the markup. Leave the script out of the embed — the footer already loaded it.
html<div class="ats_kit ats_kit_size_32"> <a class="ats_button_facebook"></a> <a class="ats_button_x"></a> <a class="ats_button_linkedin"></a> <a class="ats_button_email"></a> <a class="ats_dd"></a> </div>
- 03
Inside a Collection List, bind the URL
Webflow lets an Embed take field values. Use them for data-url so each item in the list shares its own page rather than the list page.
html<div class="ats_kit ats_kit_size_32" data-url="https://yoursite.com/blog/{{ slug }}" data-title="{{ name }}"> <a class="ats_button_facebook"></a> <a class="ats_dd"></a> </div>
Want a different set of services?
The snippets above use a sensible default. The configurator builds the exact markup for whichever services you want, in whichever order, at whichever size — paste that in place of the kit shown here.