Hi,
I’m trying to make a Bubble event out of what is happening with my embedded HTML element. It’s telling me to put this code in: (From here for context)
But it does not work, when I publish something the alert does not trigger. Tried putting the code in “initialize”, “update” functions and also In a HTML element, nothing. Any ideas on how to fix?
Is .observe even possible in Bubble? How do people usually get info from their custom code? Would appreciate if someone more experienced than me could chip in on this 
Hi @marcuslate. Do you get any errors in the browser JS console? Also, have you loaded any dependencies?
Hi Steve
No errors in the browser console. I’m loading in this library with an HTML element on page. It does not work when loading in from the plugin header (I think it’s because I’m on a free plan, which blocks custom HTML headers).
<script src=‘//www.cameratag.com/v13/js/cameratag.min.js’ type=‘text/javascript’></script>
.observe might not work in all browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
When you say getting info from your custom code, do you mean getting info into the bubble app? If so you would use exposed states for that.
Lets say you create an exposed state called “info” that is a type text. Lets send a string saying “this is your info data”. You would use instance.publishState(‘info’, ‘this is your info data’); That string would be passed.
Another thing is, you shouldn’t have to load your library through an html element. Did you download the cameratag.min.js, then upload the file on your plugin editor? You use that link you get from uploading and reference that in your plugin html header.
Hi Tim,
I tried to upload them to Bubble but it didn’t work still.
Tried adding to plugin header but it doesn’t work.
But it does work like this:
Are you on a free or a paid plan?
What I mean by getting info from my custom code is exactly what .observe is supposed to do.
To notice when something changes in the code, then execute a function. So I’m guessing there’s other ways to do that.
It’s so weird that CameraTag instructs in their documentation to use .observe when literally no modern browser supports it anymore.
Did you try putting the //dd7tel238… link you got from the file uploader in place of the //www.cameratag.com… link?
And if the documentation specifies to use .observe, i’m not sure why it wouldn’t work. Unless that library you’re trying to use is outdated.
I tried that now, still does not work.
Did you mangage to get custom headers to work in your plugin? And on a free plan?
For now I’ll just skip using .observe. I’m not sure how old the library is but it’s version 13 BETA and they are answering support messages.
Have a go at copying this over:
The data-app-id needs to match that found in your CameraTag account.
Hi,
I wrote it directly like this, not sure if it’s the best but it works.
My problem is loading in the library which only seems to work when using a on-page HTML element.
I contacted Bubble about it but they haven’t gotten back to me yet.
This won’t be a Bubble issue. The observe method is unique to CameraTag.
Take another look at the below… I have added in the .observe method, firstly for the initialized event (fired once the element is ready to record), and then for the publish event.
This seems to work, and I get the same outcome in Bubble too.
feel free to temporarily add me as a plugin collaborator via ed@wedgehog.io and I can take a look for you
As far as I know, custom headers should work at the element level of a plugin on a free plan. They don’t work at the page or app level, however.
I just heard back from Bubble, this is what they said:
Thanks for reaching out. HTML and scripts applied on the settings tab of your app are only available on paid plans. You should be able to add HTML elements to your pages using the HTML element while on the free plan. If your plugin requires script/meta tags in the header then it will not work on a free app.
I’m not at my computer at the moment, so I’ll check again when I am, but as I recall, there are two places in a plug-in where headers can be added. I’m referring to the section corresponding to a particular element of the plug-in. I’m certain that I added a script tag with an alert, and the alert appeared when the page was loaded.
I just tested with an alert and console log in the plugin element header as a script, could not get it to work.
Interesting. This is what I have in my element header section…
And this is what I see when the page loads (on a free plan)…
That’s so odd, I have my script just like that and It still does not work. Can you PM me a link to your app editor so I can see it?
