Use custom made plugin at particular position of a page

Hello everyone!
I hope that you all are doing great.

I am new to Bubble. I am learning about how to build your custom-made plugin on Bubble. My Plugin code includes HTML/ CSS only. But, I am stuck at the point where my plugin works on the header only. I want my plugin to work within the page of a Bubble app. I am unable to figure it out how one can do it on Bubble.

Hi @aamir,

Do you mean by this that the HTML/CSS you are adding to the shared header section inside the plugin editor is getting added to your test app but you’re struggling to create a Plugin element that you can add onto the page?

If yes, click Elements on the left and create a new element right there at the bottom.

Let me know if this helps.

I have added my code here in the header section. This will make my code work above the index page.
I want my plugin to work at a particular position of my index page. What to do for it?

In order to append your <div class="area"></div> to the canvas of the plugin element you can simply use the initialize function.

So for example use the following to show your Div inside the plugin element in your test app’s page:
let myDiv = $("<div class="area" ></div>");

To later retrieve it, you could add this as well: = myDiv

Is this clearer?

1 Like

Thanks for your time and solution

This topic was automatically closed after 70 days. New replies are no longer allowed.