Answered

Start button issue with Widget react

B
Badge

Hello everyone,

I have a issue with the start button of my typeform but only on mobile view.
On desktop view, the start button is not here and i don’t want it on the mobile view too.

There is my code in react / typescript:

import { Widget } from "@typeform/embed-react"
 

<Widget

id={myId}

style={mobileView ? { width: "100%", height: "100%", margin: 0, padding: 0 } : { width: "100%", height: "700px" }}

className="my-form"

onSubmit={() => {

setTypeformSubmitted(true))

}} />

If someone can help me … 😅
Big thanks.

icon

Best answer by mathio 21 July 2023, 09:39

View original

15 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @BenjaminP Could you share the URL where you have the form located? Thanks!

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

Hello Liz, did u mean the website ?

Liz
Rank
Userlevel 7
Badge +5

Hi @BenjaminP Yes, that’s correct. We’ll need the specific URL on that website where the form is embedded to take a look into this. 

Life is a series of awkward moments separated by snacks.
Grace
Rank
Userlevel 7
Badge +5

Hey @BenjaminP don’t forget to share the website URL here so we can take a look at your embed 😊

If cauliflower can become pizza, you my friend can do anything
B
Badge

Hey @BenjaminP don’t forget to share the website URL here so we can take a look at your embed 😊

Hey everyone, i’m sorry i didn’t see your message.

Here the link of the website where i use typeform, you need to sign in and the typeform appear

Big thanks !
Benjamin

Liz
Rank
Userlevel 7
Badge +5

Hi @BenjaminP Thank you! Do you have the form on a public page we can access to see the issue? 

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

Hi @BenjaminP Thank you! Do you have the form on a public page we can access to see the issue? 

Hello @Liz if i create an account for you and you have just to log in to get an access to the form will be ok ?

Liz
Rank
Userlevel 7
Badge +5

Hi @BenjaminP The best thing to do would be to place the form on a public page so we can see what’s happening fully. Though, if you do need to create an account for access to the form, the best thing to do might be to contact our support team for 1-1 help here, as that’ll allow you to send private information over to them!

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

Hey @Liz, sorry for the delay but here is the public page for the typeform

https://codesandbox.io/s/typeform-start-button-problem-mobile-2ytjdd?from-embed

But the problem is the start button doesn’t appear on this sandbox code but still on my app.
I can maybe share a private loom for explain/show ?

Liz
Rank
Userlevel 7
Badge +5

@mathio do you happen to see anything in the above code that would prevent the start button from appearing? 

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

the button start must not appear at all.
The current behavior is that it doesn't appear in the desktop version, and it does appear in the mobile version.

mathio
Rank
Userlevel 7
Badge +5

Hello @BenjaminP 

it looks like you are referring to the welcome screen being displayed on mobile. This is to make sure the typeform opens in fullscreen modal window to provide better user experience to your respondents.

However if you would like to disable it, in React you can add inlineOnMobile prop to your Widget component like this:

<Widget
  id={"HX82QV9G"}
  style={{ width: "100%", height: "700px" }}
  className="my-form"
  inlineOnMobile
/>

For further information make sure to check out our embed SDK README file and our developer portal.

L

Hi,

I’m having this issue with my Google Site. Where would I put the inlineOnMobile code in order to bypass the welcome screen being displayed on mobile? 

Here is a screenshot of where I input the embed code for the form on my Google Site:

 

mathio
Rank
Userlevel 7
Badge +5

Hello @lindsay_moonspin ,

this thread is related to React Embed SDK.

 

Since you are building the snippet using the share page, you can disable the full screen functionality on mobile that will also disable the welcome screen. You need to turn off this toggle (on the right hand side of the screen):

 

L

thank you @mathio - worked like a charm!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs