Integrate React Component Within Bubble As A Plugin

Need help Plugins
1

I have built a React app and deployed it on (holy-breeze-n6v9cz - CodeSandbox) and wish to integrate this component inside Bubble.

I have created a custom plugin on Bubble that tries to integrate with this component but when I try to test/preview this with my Bubble app. I am unable to render the same.

I would like assistance on which scripts to correctly reference within the Bubble plugin’s HTML headers and also how to correctly code the “initialize” function within the plugin.

2

In the Bubble plugins, I don’t think you can use import statements. At least, I have never been able to get it to work on a Client side element before. Instead you would need a CDN. In the initialize I always use the following code as the beginning of creating the element.

const newDiv = $(`<p>Any HTML Element Goes Here </p>`)
newDiv.css("width", "100%");
newDiv.css("height", "100%");
instance.canvas.append(newDiv);

If you have all the code and just want to use it in the plugin then you can just copy and paste it in the top of the initialize function and you can reference all your functions if you do not have a way to import via CDN.

2 Likes
3

Thank you for your response. I have a few follow-up questions:

  1. When you say reference all the functions, would that be within the initialize function or somewhere else
  2. Could I perhaps use an HTML element within the Bubble design page and insert my code there?
    Thanks a lot once again!
4
  1. Within the initialize function
  2. Yes you can use an HTML element and there can add HTML, CSS, and JS by using style and script tags.