How To Add Common Ninja’s Apps To Bubble.io

Display a Common Ninja plugin inside Bubble.io App

Bubble platform is a no-code app builder, allowing users to create SASS and web apps without the need for heavy lifting programming skills.

Embedding a Common Ninja plugin in your Bubble App?

Once you’ve created your Common Ninja Plugin and saved it, you can copy the HTML code to embed your plugin in almost any platform.

Copy the embed 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 code to the Bubble.io app

Add an HTML element to the App

In your Bubble app editor, under the Design options, drag and add an HTML element to your app.

Configure the HTML Element

Click on the HTML element and set the element configuration under the Display tab:

1. First, paste the embed code you copied in the Common Ninja Editor.
2. Check the “Display as an iFrame” checkbox.
3. Check the “This element is visible on page load” checkbox.
4. Uncheck the “Make this element fixed-width” checkbox.
5. Check the “Apply a max-width when the page is stretched”
6. Set the “Maximum width” to 100.
7. Check the “Keep element proportions as the page is resized” checkbox.
8. Set the width and height.

Click on Preview to view the plugin in Preview Mode