Canva button in wordpress widget

I want to use canva button in my wordpress widget.

When you create canva button, they provide to you code which you copy and paste into your site, in my case in widget UI. The code looks like this:

Read More
<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</span>

<script>(function(c,a,n){var w=c.createElement(a),s=c.getElementsByTagName(a)[0];w.src=n;s.parentNode.insertBefore(w,s);})(document,'script','https://sdk.canva.com/v1/api.js');</script>

Span is the button, and javascript will include an canva js file in head which will style the button and add click event on it. When you click on the button you will get popup to create some design.

Here is demo how it looks like when you place canva button on the frontend.

And here is screenshot how I am using it, in the widget UI:

enter image description here

The problem is that click event doesn’t work when I drag and drop widget into sidebar and the canva popup is not showing. After I drag and drop widget in the sidebar I need to refresh the page in order to have click event work. I guess that this is because HTML of the Widget will be appended to the sidebar, but clicks events are already added.

Is there a way to handle it with some javascript code. Need to say that I cannot change the Canva javascript file so I need to do it with my javascript

Related posts

1 comment

Comments are closed.