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. On the editor, enter the “Add to Website” section in the left panel.

2. Here, if you already saved your plugin, you’ll see the Installation Guide area.

Click on the Green button to copy the script to your clipboard.

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