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:
<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:
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
The data-api-key is provided by canva. The example one is not valid.