I’m trying to load a javascript form in a footer.
I have thise in the header:
<script type="text/discourse-plugin" version="0.8">
let loadScript = require("discourse/lib/load-script").default;
api.onPageChange(() => {
loadScript("//js.hsforms.net/forms/current.js").then(() => {
console.log("doing the thing");
hbspt.forms.create({
portalId: "229276",
formId: "a86ca9cc",
submitButtonClass: "button orange-button hubspot-button",
target: ".subscription-form"
});
});
});
</script>
And this in the footer:
<div class="subscription-form clearfix">
<h5>Sign Up for Our Blog</h5>
</div>
The first time the page loads, it works fine. Subsequent pages (most of them, at least), fail to load the form and are complaining:
Couldn't find target container .subscription-form for HubSpot Form a86ca9cc. Not rendering form onto the page
I think that maybe the footer gets loaded after the script fires?
So I somehow need to delay firing that until the footer loads.
plugin-api.js
says:
// Listen for a triggered `AppEvent` from Discourse.
api.onAppEvent("inserted-custom-html", () => {
console.log("a custom footer was rendered");
});
Maybe I just need to know what AppEvent
to look for?