AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

How to Install AddThis on Webflow

By installing AddThis tools on your Webflow website, you let your site visitors easily share your content, follow you on social media, and more. In this article, we’ll show you how to integrate AddThis tools in just a couple of easy steps.

1. Get the code snippet from your AddThis Dashboard

Before your embed AddThis tools on your Webflow site, you’ll first need to activate AddThis on your website by installing a unique code snippet.

First, register for an AddThis account and create an AddThis profile for your website.

In your AddThis dashboard:

  • Go to your website’s profile
  • Click “Get the code” in the top menu bar
  • Copy the installation code snippet that is unique for your profile
Image 1: Get AddThis code

2. Activate AddThis on your Webflow website

Paste the AddThis code snippet you copied in your Webflow project’s footer code following the steps below.

In your website’s Project setting in Webflow:

  • Go to the Custom code setting page
  • Paste the AddThis code snippet into the Footer code section
  • Save your changes
  • Publish your site
Image 2: Embed the code in your project settings

3. Embed AddThis tools in your website

Once you’ve activated AddThis on your site, you can add AddThis website tools or targeting tools in your AddThis dashboard and automatically activate them on your website. You can also add inline tools by embedding another snippet of code on specific locations on your page.

How to activate AddThis tools for your website

In your AddThis dashboard:

Image 4: Activate AddThis tools

All tools, except for inline tools and the Tip Jar, will now appear on your live site without adding any other code. No need to republish your Webflow project.

How to embed inline tools on your web pages

If the tool you activated is an inline tool or the Tip Jar, you need to embed an additional line of code to activate these types of tools on your site.

In your AddThis dashboard:

  • Go to your website’s profile
  • Go back to the Tools page
  • Look for the tool in the tools list and click the “Get the code” button
Image 5: Get the code of inline tools
  • Switch to code only view
  • Copy the inline code
Image 6: Copy the code of inline tools

In your project in the Webflow Designer:

  • Go to the page where you want to embed the tool
  • Drag an Embed element from the Add panel and drop it onto your page exactly where you want the tool to appear
  • Paste the code you copied into the Embed element and save the changes
  • Publish your website to see the tools on your live site
Image 7: Embed an inline tool on your page

Control which pages your AddThis tools appear on

Now you’ve activated AddThis on your entire website! If you want the AddThis tools to appear only on selected pages of your website, you can use the “Show/Hide on These Pages” setting for each tool in your AddThis dashboard to control which pages these tools appear on.

Alternatively, instead of pasting the AddThis installation code snippet at the project-level, you can paste the code in each page’s footer code section.

If you need any assistance, please feel free to contact our dedicated support team. We are always glad to help!

Last modified:  September 17th, 2019