Is there a way to completely turn off button/widget/popup styling (Nextjs and embedded typeform sdk)? | Community
Skip to main content
Answered

Is there a way to completely turn off button/widget/popup styling (Nextjs and embedded typeform sdk)?

V

Hey Gang-  I am a relative noob to react.js/next.js and using a purchased template with custom styling.  I’ve tried a couple of experiments to wrap the custom button code around the Typeform PopupButton examples but am unable to get the popup functionality without losing the original styling. What generally results is some ugly looking mix of the two.  

 

This is one of many failed tests:

 

<Button

className="donate__btn"

variant="secondary"

aria-label="Get Started"

>

<PopupButton id="fooCode">

Request Invite

</PopupButton>

</Button>

 

I would appreciate any tips or tricks to do this.  TIA, V.

 

Best answer by mathio-tf

Hello @Vince Fulco 

you can use CSS to customize the button. First add class name:

<PopupButton id="<form-id>" className="my-button">
  open form
</PopupButton>

Then you write your CSS to customize the button:

.my-button {
  color: red;
  border: 1px green solid;
  background: yellow;
  border-radius: 10px;
  padding: 5px 10px;
}

Alternatively you can write the CSS directly in style attribute of the PopupButton component.

View original

6 replies

mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • Answer
  • August 4, 2021

Hello @Vince Fulco 

you can use CSS to customize the button. First add class name:

<PopupButton id="<form-id>" className="my-button">
  open form
</PopupButton>

Then you write your CSS to customize the button:

.my-button {
  color: red;
  border: 1px green solid;
  background: yellow;
  border-radius: 10px;
  padding: 5px 10px;
}

Alternatively you can write the CSS directly in style attribute of the PopupButton component.

john.desborough
V
Gabi Amaral
3 people like this
  • john.desborough
    john.desborough
  • V
    Vince Fulco
  • Gabi Amaral
    Gabi Amaral
Z
Forum|alt.badge.img+1
  • Zozo
  • Explorer
  • 10 replies
  • August 24, 2023

Hi @mathio! I’m wondering with using the embed code with the pop-up option, is there a way to completely bypass the button? I’d love to have a Shopify site’s page (hidden back-slug/a page only accessible from a button in the home page) to lead directly to the pop-up if possible? Currently it’s taking me first to a blank page with a button before the pop-up.

Thanks in advance for any help!

Z
Forum|alt.badge.img+1
  • Zozo
  • Explorer
  • 10 replies
  • August 24, 2023

p.s. @mathio, also to add to my above note for context: I’m using PageFly to create a home page, in a Shopify site. The PageFly home page uses a content list’s images as buttons basically, to send to a url. The image represents a service. When clicking the image, I’m hoping to have it go to my site’s backslug alla “mysite . com / service-name” to then prompt the typeform pop-up embed.

Thanks in advance for reading!

mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • August 25, 2023

Hello @Zozo 

you can do this on the share page by using Custom launch options to make the popup open On page load.  You can even hide the button byt disabling the Show launch button toggle. You can fidn the setting on the right hand side under Advanced tab.

 

Alternatively you can achieve the same functionality using the embed SDK if you prefer that.

Grace
Z
2 people like this
  • Grace
    Grace
  • Z
    Zozo
Z
Forum|alt.badge.img+1
  • Zozo
  • Explorer
  • 10 replies
  • August 25, 2023

@mathio  amazing, thank you! I’ve tried this via share > embed in a webpage > advanced tab on the right > and the custom launch option you sent + toggling off the show launch button. I copied and pasted the embed code for Shopify, but it doesn’t seem to be working. Is there any other troubleshooting you could recommend? And I’d be open to alternatively trying the SDK route though I am unfamiliar, in case you might recommend perhaps a video for beginners to use the info in the link. Thanks in advance!

 

Z
Forum|alt.badge.img+1
  • Zozo
  • Explorer
  • 10 replies
  • August 25, 2023

p.s. @mathio actually, I think nevermind, it seems to work now! It wouldn’t work for some reason via the Shopify page’s show-html function, but pasting it into the page’s custom liquid section worked somehow. Thanks again for sharing the advanced tab info!

mathio-tf
Grace
2 people like this
  • mathio-tf
    mathio-tf
  • Grace
    Grace

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs