How To Add Common Ninja’s Widgets To Webflow

Webflow is a powerful, cloud-based website builder, geared for beginners, and professional developers alike. You can make websites and applications from the ground up and get running in no time!

In this tutorial, we will guide you step by step on how to add a plugin to your Webflow site:

Get the Common Ninja Code

1. First, you need to copy the widget’s HTML code. There are several methods to do so. 

Method 1: From the Widget’s Editor

Once you’ve saved your widget, at the top right corner, to the left of the “preview” button, you will see the “Add to Website” button, represented by the “</>” symbol. Click on it. 

Then, in the window that opens up, you will see the code. Simply click on the copy button next to it. 

Method 2: From the Dashboard

From your user dashboard, find the widget you want to add to your website from within the “Widgets” tab. Next to it, and under the “Actions” heading (on the right side), you will see a purple button with “Add to Site” on it. Click on it. 

A window will pop up, and here, simply click on the copy button next to the code to copy it. 

Adding the Widget on WebFlow Designer

 Now, once you copy the widget code, head to Webflow and enter the website Designer.

On the Designer menu, find the Custom Code element. Just so you know, this feature is only available to premium users.

Drag the Custom Code to anywhere you wish your widget will appear on the website.

Now, in the Custom Code window, past the widget embed code you copied, and click save.

The widget was added to your WebFlow website, but will show only on the website itself after it.

Publish your site, and you'll see the widget on your website.