Why my Beaver Builder site is not editable after adding the widget

Sometimes after adding our widget to your Beaver Builder WordPress website, you may face the situation that your website's content is not editable anymore. Please don't worry, your website is not broken.

However, we need to let you know that our widget and Beaver Builder sometimes conflict with each other. Fortunately, we have created an easy workaround for you that will fix this issue!

How to add our widget with Beaver Builder

You need to use the following installation code instead of the code you get in your Elfsight dashboard:

<script src="https://apps.elfsight.com/p/platform.js" defer="" type="text/javascript"></script>
<div class="elfsight-custom"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.elfsight-custom');	
if(document.body.classList.contains('fl-builder-edit')) {
	container.innerHTML = "<iframe src='https://apps.elfsight.com/widget/WIDGET_ID' width='100%' height='700' frameborder='0'></iframe>";
	} else {
		const div = document.createElement('div');
		div.classList.add('elfsight-app-WIDGET_ID');
		container.append(div);
	}
})
</script>
Where you need to change WIDGET_ID on the lines 7 and 11 of this JS code with the ID of your own widget. You can easily copy it from your widget installation code:

Done! Your Beaver Builder website is editable now.


If you have any questions left, please feel free to contact our Support Team, we will be delighted to assist.

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us