Answered

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

  • 4 August 2021
  • 6 replies
  • 310 views
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.

 

icon

Best answer by mathio 4 August 2021, 10:49

View original

6 replies

mathio
Rank
Userlevel 7
Badge +5

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.

Z
Userlevel 1
Badge

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
Userlevel 1
Badge

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
Rank
Userlevel 7
Badge +5

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.

Z
Userlevel 1
Badge

@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
Userlevel 1
Badge

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!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs