Hey Support,
I have tried using the meeting embed script on a few different WordPress website and themes and I keep getting on conflict. The code I’m using was provided by hubspot and is provided below. I have replaced identifying information with EXAMPLE for the sake of anonymity.
<!-- Start of Meetings Embed Script --><div class=“meetings-iframe-container” data-src=“https://meetings.hubspot.com/EXAMPLE?embed=true”></div><script type=“text/javascript” src=“https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js”></script><!-- End of Meetings Embed Script —>
Is anyone else experiencing a similar issue? How did you resolve the conflict?
@Hammerhead where are you trying to embed the script in WP?
I’ve not had a problem embedding the meeting widget on other WP sites in the past.
I have quickly dumped the script into a development website here to display the issue I am referring to: <REMOVED>
When I add the script nothing loads after it. I have had similar issues when using different themes and plugins. This issue seems to be related to the embed and less related to any sort of specific conflict with a theme or plugin.
W@Hammerhead it looks like you’re adding it within a text block for existing content, have you tried adding it as a new element instead of inserting it directly between two other paragraphs?
One other option you can try is to leave this code in place:
<!-- Start of Meetings Embed Script -->
<div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/dankrytter/krytter-demo-guide-meeting?embed=true"></div>
<!-- End of Meetings Embed Script —>
and move this code to your header:
<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
without seeing how you’re adding in the WP editor, this is my best guess based on how the code is rendering on the website - it’s breaking the <div> for the content below.
Hi Jennifer,
Thank you for your response.
it looks like you’re adding it within a text block for existing content, have you tried adding it as a new element instead of inserting it directly between two other paragraphs?
That is the default div for all items that come in from the Gutenberg editor. There is no way to put entry content outside of this.
and move this code to your header
I should have mentioned this, but we tried this option. Rather than load the script in the header, we tried loading it in the footer after everything else loaded. The same problem occurred. Basically it anything underneath the script is not processed.
@Hammerhead ah, I didn’t realize you were using Gutenberg, I’m glad you were able to find a solution that works by splitting the code!
Scratch that. splitting the code doesn’t work this way either. Visually it looks like it does, however, it causes more conflicts which present in different ways.
I have tried the meeting embed on 5 different WordPress websites all running on different themes and encountered this issue.
How have you been using this embed on WordPress websites using the Gutenberg editor?
I would prefer not to use the iframe option.
@Hammerhead I haven’t had a WP site with Gutenberg in a long time and never had one that needed meetings embed, the only WP sites I’ve used recently with meetings are Divi and Elementor.
I still think it has something to do with adding the code directly in the block with other text and not creating a new block for the embed.
Are you following these steps for adding an embed to gutenberg?
I still think it has something to do with adding the code directly in the block with other text and not creating a new block for the embed.
The code is contained within its own HTML block. Again, what you see is the default <div> content area being cut off. This is the problem I am trying to address. Everything below the <script> stops being processed.
Are you following these steps for adding an embed to gutenberg?
This is not relevant as this is just embedding a URL. The script is what is creating the conflict - regardless of where it is added in WordPress.
I’m getting my resources from Hubspot, which all seem to be out of date. For instance, this article from the knowledge base Add HubSpot forms to WordPress pages and posts (legacy) suggests using a plugin which hasn’t been tested with the latest 3 major releases of WordPress (Inline JS Block for Gutenberg – WordPress plugin | WordPress.org).
@Hammerhead I’m sorry I couldn’t be of more help, it sounds like you’ve isolated the issue and unfortunately I don’t know what the solution is, especially without access to the WordPress account to review the configuration directly.
Maybe @Jaycee_Lewis can provide further guidance or recommendations for who might be able to help.