Answered

Start Button on Mobile

Show first post

72 replies

A

Hey folks, we just ran into this same issue this morning. We are using the new Embed SDK in fullscreen embed mode (createWidget according to these docs). We do not have a welcome screen and want the page to go directly to the first question. 

 

As of last night this was working fine on both desktop and mobile -- the first question showed up immediately without a welcome screen. This morning, it appears the default welcome screen is back on mobile (but not desktop). Furthermore, the Embed SDK appears to fall back to a modal embed (with an X in the top right) even though we specifically called createWidget.

 

Did something recently change with the Embed SDK or upstream configuration? This appears to be a regression and is pretty frustrating.

A

Hey folks, we just ran into this same issue this morning. We are using the new Embed SDK in fullscreen embed mode (createWidget according to these docs). We do not have a welcome screen and want the page to go directly to the first question. 

 

As of last night this was working fine on both desktop and mobile -- the first question showed up immediately without a welcome screen. This morning, it appears the default welcome screen is back on mobile (but not desktop). Furthermore, the Embed SDK appears to fall back to a modal embed (with an X in the top right) even though we specifically called createWidget.

 

Did something recently change with the Embed SDK or upstream configuration? This appears to be a regression and is pretty frustrating.

 

@Liz @Kachun it looks like this was a new change that went out this morning: https://github.com/Typeform/embed/pull/305/files

This defaults to a fullscreen modal when on mobile (and thus requires the welcome screen, which AFAIK isn’t configurable currently).

 

@Liz

 

Hi, how can I turn off the cover page on mobile, if I am using the createWidget function to embed my survey? ie. how do I set the option for typeform-welcome to 0? 

Thanks

 

window.tf.createWidget(formId, {

                    container: document.getElementById("wrapper"),

                    hidden: {

                        userId: receivedEvent.userId,

                        visitorId: receivedEvent.visitorId

                    }

}

 

To get the old behavior back, pass inlineOnMobile: true to createWidget. 

Liz
Rank
Userlevel 7
Badge +5

Thanks for sharing, @AndrewC ! Super handy and helpful. Appreciate it!

Life is a series of awkward moments separated by snacks.
B

Am Having the same issue with typeform-welcome to 0? still showing a start button on mobile. I see a fix is in the works just commenting to stay updated.

Liz
Rank
Userlevel 7
Badge +5

Hi @BrunoCrypto Do you mind sharing the URL where you have your form embedded so we can take a look?

Life is a series of awkward moments separated by snacks.
M

getState()

      .then((res) => {

        setLoading(false)

        createWidget('abcd', {

          container: document.getElementById('idname'),

          hidden: {

            occupation_id: id,

            occupation_name: name,

            state: res

          }

        })

      })

 

How can I add ?typeform-welcome=0 here?

Liz
Rank
Userlevel 7
Badge +5

Hi @muneeb.rehmanTechClan - thanks for stopping by. 

As @AndrewC mentioned above, you’ll need to pass inlineOnMobile: true to createWidget

 

Let us know if you have any trouble with adding this. 

Life is a series of awkward moments separated by snacks.
B

@Liz hi there - is there a fix for this issue? I would like to embed a quiz on a website and jump straight into the first question on mobile. There seems to be no option to skip the Start screen on mobile (on desktop it works fine)

C

I was able to get around the issue of having a welcome screen appear on mobile by adding

data-tf-inline-on-mobile="true"

to my div. Since I did not want the welcome screen on either the mobile or desktop, I just started my survey with the first question (i.e. did not have a welcome screen at all). Here’s the full example of my embedded code:

<div data-tf-widget="XXXXXXXXX" data-tf-inline-on-mobile="true" style="width:100%;height:90vh;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

Note that the documentation for the inlineOnMobile states “removes placeholder welcome screen in mobile and makes form show inline instead of fullscreen.” Therefore, be careful that in addition to skipping the welcome screen by enabling this, you aren’t affecting other parts of your setup for inline/fullscreen. (I don’t understand why this function affects two parts of the setup rather than having two separate options.)

B

@chris.h.22 thanks for your help. my embed code looks like this, where do you think i should add that?

<div class="typeform-widget" data-url="XXXXXXXX" style="width: 100%; height: 600px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

C

@barneyev - I think you can just put it in the div container, so your new code would look something like

<div class="typeform-widget" data-url="XXXXXXXX" data-tf-inline-on-mobile="true" style="width: 100%; height: 600px;"></div> <script> (function() { var...

P
Userlevel 1
Badge

EDIT: It’s the same solution provided by @chris.h.22 (sorry I missed the page 2 of the thread!). I’ll leave it for context compared to the solution marked as correct.

 

I don’t know if Typeform has changed the embed method or what but the solution marked as correct doesn’t work in my case because there’s no URL to append the “typeform-welcome=0” since the actual <iframe> is not included in the provided embed code (it’s created by the script when the page loads).

If your embed code looks like this:

<div data-tf-widget="XXXXXXXX" style="width:100%;height:500px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

you just need to add data-tf-inline-on-mobile inside the <div> so your code looks like this (the typeform MUST NOT have a welcome screen like in the other solution):

<div data-tf-widget="XXXXXXXX" data-tf-inline-on-mobile style="width:100%;height:500px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

That worked for me. Hope it saves time to someone.

Note: This will change the default behaviour of showing the typeform as a full-screen pop-up and will show it as an inline embed instead (in my case it was what I wanted but watch out in case you need to do some style changes in your site)

Source: https://help.typeform.com/hc/en-us/articles/4404417003156-Troubleshooting-embedded-typeforms#h_01FCQEMQT3R6GZ066EG2QYAJ02

 

Cheers.

5

So… long story short on this thread:

 

If you’re trying to remove the start screen on mobile (after using the standard embed option), the instructions that say to add “?typeform-welcome=0” to the embed URL will not work. And you recommend hiring a developer to figure out how to use the Embed SDK.

 

That’s what I’m getting from this thread.

 

Did I miss something?

5

EDIT: It’s the same solution provided by @chris.h.22 (sorry I missed the page 2 of the thread!). I’ll leave it for context compared to the solution marked as correct.

 

I don’t know if Typeform has changed the embed method or what but the solution marked as correct doesn’t work in my case because there’s no URL to append the “typeform-welcome=0” since the actual <iframe> is not included in the provided embed code (it’s created by the script when the page loads).

If your embed code looks like this:

<div data-tf-widget="XXXXXXXX" style="width:100%;height:500px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

you just need to add data-tf-inline-on-mobile inside the <div> so your code looks like this (the typeform MUST NOT have a welcome screen like in the other solution):

<div data-tf-widget="XXXXXXXX" data-tf-inline-on-mobile style="width:100%;height:500px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

That worked for me. Hope it saves time to someone.

Note: This will change the default behaviour of showing the typeform as a full-screen pop-up and will show it as an inline embed instead (in my case it was what I wanted but watch out in case you need to do some style changes in your site)

Source: https://help.typeform.com/hc/en-us/articles/4404417003156-Troubleshooting-embedded-typeforms#h_01FCQEMQT3R6GZ066EG2QYAJ02

 

Cheers.

 

Just tried this solution, and it ended up working.

 

Just make sure that you delete the welcome screen inside of TypeForm first.

 

TypeForm should really update the misleading instructions on this page: https://help.typeform.com/hc/en-us/articles/360029249212-Embed-your-typeform since they clearly don’t work. Just wasted an hour.

 

Thanks to patricia fichtner who provided the fix.

Liz
Rank
Userlevel 7
Badge +5

Hi @5SALNKT772UV4 Thanks for pointing that out - I’ve asked our Help Center team to remove this part of the article. 

Life is a series of awkward moments separated by snacks.
originalconfidence
Userlevel 1
Badge +1

Hey @Liz, I do have a simmilar problem here. Did you change the structure of the embedded code snippets in the last update. I have another typeform embedded where it works with the paramteter behind the URL as explained above.

 

Now, I’ve created a new typeform, but the code looks totally different and doesn’t even contain a URL?

This is the get code that I get:

<div data-tf-widget="HhIfuoAH" data-tf-iframe-props="title=Kundenzufriedenheit" data-tf-medium="snippet" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx" style="width:100%;height:700px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Can you help out?

Liz
Rank
Userlevel 7
Badge +5

Hi @originalconfidence We have updated the embed code, and this looks to be the correct code. If you’re having issues with the code on your site, do you mind sending the URL where you have the form embedded? 

Life is a series of awkward moments separated by snacks.
originalconfidence
Userlevel 1
Badge +1

@Liz The code isn’t the problem. I just don’t know where to add now the parameter: ?typeform-welcome=0

 

Can you help?

Liz
Rank
Userlevel 7
Badge +5

HI @originalconfidence Ah! Got it. 

You can override the pop-up with a small edit to your site code.  After the "data-tf-widget" attribute, add the snippet "data-tf-inline-on-mobile". Your code should look something like this:

<div data-tf-widget="ABCDEF" data-tf-inline-on-mobile></div>
Life is a series of awkward moments separated by snacks.
K

For anyone still struggling with this on the new forms, see this article - 

 

S

Hi @Liz,

I’m facing a similar issue trying to hide the welcome screen on mobile.

Tried the above method It’s not working in my case.

Could you please help?

Page URL: https://xoxosite.webflow.io/thank-you-v3

Code: 
<div data-tf-widget="HywzdNX1" data-tf-iframe-props="title=Just a few more details... V3" data-tf-medium="snippet" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx,email=xxxxx" style="width:100%;height:100%;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Thanks!

S

Hi, we have solved this welcome screen on mobile by using iframe tag 
<iframe src=””> </iframe> we have added the social media link and its working fine
 

 

Liz
Rank
Userlevel 7
Badge +5

Hi @Shilpa_Rao Thanks for stopping by and sharing that! I’m not quite sure I understand the solution - are you just saying you wrapped the code in an iFrame? 

One thing I will note is that while you can use this embed method, it isn’t supported if something goes wrong. I would still suggest giving the code mentioned here a try!

Life is a series of awkward moments separated by snacks.
M

Hello everyone,

I am well aware that this has been a topic already, but unfortunately none of the solutions provided seems to work for us. We are embedding our Typeforms as Standard on our website and would like to remove the welcome screen on mobile as it is a major conversion killer for us.

This is what our embed code looks like:

<div data-tf-widget="XXXXXX" data-tf-iframe-props="title=XXXXXXX" data-tf-medium="snippet" style="width:100%;height:800px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

We have already tried the “data-tf-inline-on-mobile” method but it doesn't seem to work for us.

Any help would be greatly appreciated as I think we are not the only ones having issues with this matter.

Thank you very much in advance!

Liz
Rank
Userlevel 7
Badge +5

Hi @Max M. Moved your post here to be sure we keep the info concise in one thread. 

@mathio do you know if there have been any updates to the embed code? 

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs