Skip to main content
Answered

Hidden Values in Full-Page VideoAsk Embed


Forum|alt.badge.img+2
  • Sharing wisdom
  • 15 replies

Hello! (especially @Maya and @mathio )

I have a full-page embed of a Typeform that works with the JavaScript code like this:

// create widget embed
window.tf.createWidget('<form-id>', {
  container: document.querySelector('#wrapper'),

  // pass the data to your typeform as hidden fields
  hidden: {
    hidden_var_1: x,
    hidden_var_2: y,
    hidden_var_3: z
  }
})

What is the equivalent JavaScript code in VideoAsk?

Best answer by mathio-tf

You can achieve this with some custom JavaScript like this:

<iframe id="videoask"></iframe>
<script>
  const iframe = document.querySelector('#videoask')
  iframe.src = `https://www.videoask.com/fn5pz0q1v#user_id=${getId()}`
</script>

 

 

View original

8 replies

Grace
Community Team
Forum|alt.badge.img+5
  • Community Advocate
  • 2538 replies
  • June 27, 2022

Hey @TMo hope you had a good weekend!

Not sure if this could help, but we do have a code snippet here for a full page embed. Just checking with the team to see if there is a JavaScript equivalent! 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • June 27, 2022

Hello, (I am not an expert on VideoAsk, sorry) if you are referring to passing hidden fields into your VideoAsk I think you should be able to achieve this by modifying the URL in iframe src attribute.

<iframe
  src="https://www.videoask.com/fn5pz0q1v#hidden_var_1=x&hidden_var_2=y&hidden_var_3=z" 
  ...
></iframe>

 


Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 15 replies
  • June 27, 2022

Hmmm. I need to be able to dynamically pass hidden variables.

For example, we want to have a VideoAsk set up for our existing users that are logged into our website. Therefore, we do something like the following for our Typeform surveys to automatically pass user IDs and I would like to start using VideoAsk more like this too:

id = getId(); // custom function

// create widget embed
window.tf.createWidget('<form-id>', {
  container: document.querySelector('#wrapper'),

  // pass the data to your typeform as hidden fields
  hidden: {
    user_id: id
  }
})

 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • June 27, 2022

You can achieve this with some custom JavaScript like this:

<iframe id="videoask"></iframe>
<script>
  const iframe = document.querySelector('#videoask')
  iframe.src = `https://www.videoask.com/fn5pz0q1v#user_id=${getId()}`
</script>

 

 


Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 15 replies
  • June 28, 2022

@Grace, I have been able to make something work for my needs based on your comments and @mathio ‘s comments. FYI, I found it much nicer to add one thing to the style sheet:

    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
      }
    </style>

By setting overflow-x and overflow-y to hidden, I could get rid of that annoying and pointless scroll bar.

I am not a web developer, so I do not know if that is a robust solution, but you might want to ask your web developers to consider that in the official recommended code for a full-screen embed.


Gabi Amaral
Ex–Typefomer
Forum|alt.badge.img+5
  • Ex–Typefomer
  • 1779 replies
  • June 29, 2022

Hey @TMo! Can you send us the link to your website (where you embedded your videoask)? 


Grace
Community Team
Forum|alt.badge.img+5
  • Community Advocate
  • 2538 replies
  • June 30, 2022

Hey @TMo 

I’ve passed this on to the developer team and they’re going to take a look and see if they can add this on to make it clearer in the full-screen embed code 🙏 thank you for flagging it! 


Grace
Community Team
Forum|alt.badge.img+5
  • Community Advocate
  • 2538 replies
  • July 28, 2022

Hey @TMo Hope you’re doing well 😊

Just wanted to stop by and give an update from the team, they’re going to look at possibly implementing a toggle to switch to a full screen embed. 

They also recommended this code:

<iframe src="https://www.videoask.com/fb0jkrox5?preview" allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;" width="100%" height="100%" style="border: none;" ></iframe>

Which may or may not be useful to you, especially as I know you had already found a fix! Thought I would share just in case it’s useful anyway.

 


Reply