Skip to main content

I’m struggling to embed my typeform in my vue.JS app. The form is supposed to open after clicking the “feedback” button, doesn’t it load after I first load the page, only after reloading the page the survey pops up after clicking on the button. I tried to add the <script>window.tf.load()</script>

in all different components from index.html and the components but it still doesn’t work on any browser or mobile. The network debugger shows that clicking the button the first time doesn’t execute the fetch survey command, only after reloading the fetch to form.typeform.com is executed. We were supposed to launch our beta version today but can’t because the feedback survey doesn’t work. Very frustrating because because I just upgraded my plan to be honest.

You can find our page here: https://www.brecht.ai/app

After logging in, the feedback button in the end should start the survey, but it doesn’t.

Any help would be appreciated, thanks.

Hi @jaza10 Happy little Friday! Thanks for stopping by. We don’t currently support forms embedded in apps at the moment, but @mathio might have some workarounds he can suggest to help fix the issue. 

@Liz thanks, does this mean Typeform embeds don’t work in react or Vue.JS web apps? The form works, but only after reloading the page. Curious to hear @mathio ’s workaround ideas.

Hi @jaza10 ,

if you use the HTML API it executes on page load. So if you do any navigation / content change in single page app like yours ,the form will not load. I suggest using a JS API in your case:

<script>
export default {
  methods: {
    openForm(event) {
      window.tf.createSlider('BJZiJibR').open()
    }
  }
}
</script>

<template>
  <button @click="openForm">Feedback</button>
</template>

Dont forget to include the JS and CSS for slider when using the JS API:

  • embed.typeform.com/next/embed.js
  • embed.typeform.com/next/css/slider.css

Alternatively you can install the lib as dependency via yarn add @typeform/embed (or npm).

See this Vue Playground for full example. 

PS: I think what @Liz wanted to say is we do not provide any SDK for embedding in native mobile apps. We support web apps built in any technology based on JavaScript 😃

Thanks! I copied from the Vue.JS playground and it works now. Happy beta launch day 🤗

Wahoo! Glad to hear it, @jaza10 ! 

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs