I am making my own personal webdesign website but I can't wrap my head around this problem.
How it happens: When I navigate from any page to my contact-page (where the Typeform is), the Typeform is simply not showing. When I reload the contact-page itself, it works as it is expected.
I am loading the Typeform script this way: contact.vue
head () {
return {
script: [
{ src: 'https://embed.typeform.com/embed.js' }
]
}
}
and I am embedding it in the template this way:
<div class="typeform-widget" data-url="https://url-to-my-form"
data-transparency="50" data-hide-headers=true data-hide-footer=true
style="width: 100%; height: 500px;"></div>
<div style="font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"></div>
I am following all the steps they provided, but it doesn't seem to work... I am also getting the following errors in my console but I don't think they are relevant because the form works when I reload the contact-page:
[Report Only] Refused to frame 'https://aaron479753.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".
GET https://cdn.segment.com/analytics.js/v1/9at6spGDYXelHDdz4r0cP73b3wV1f0ri/analytics.min.js net::ERR_BLOCKED_BY_CLIENT
note: I am developing on localhost so that's why HTTPS is not enabled.
Thanks in advance! Aaron
Edit: the form when I reload the page
the form when I go to (for example) /home and then back to /contanct
I fixed the issue by using an NPM package provided by jgmullor, this resolved the issue!
