Use custom made plugin at particular position of a page

[aamir]

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.

[jukoen]

Hi @aamir,

@aamir

my plugin works on the header only

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.

[aamir]

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?

[jukoen]

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

https://manual.bubble.io/account-and-marketplace/building-plugins/building-elements

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>");
instance.canvas.append(myDiv)

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

Is this clearer?

[aamir]

Thanks for your time and solution