Can you change the class: "typeform-share button" when you embed the form in your HTML? | Community
Skip to main content
Answered

Can you change the class: "typeform-share button" when you embed the form in your HTML?

  • February 2, 2021
  • 3 replies
  • 678 views
M

Hi peeps, essentially I am developing a simple web page and would like to embed 2 different pop up forms on the same page.

Naturally I am trying to create 2 separate classes but when you go to share>embed>popup the embed is always the default class: "typeform-share button" When I change the class so that I can modify the CSS separately, I can’t figure out how to change the corresponding JS to work with it or even know if its still possible.

 

 

Does anyone know how to change the corresponding script so that it will work if I rename the class?

 

Hope this makes sense and isn't a stupid question! 

 

 

Best answer by picsoung

Hey @Markeeco 

Thank you for your question đź™Ź

We provide snippets to embed your typeform in the Share panel. Those are great because you can change some settings and do a quick copy/paste wherever you need your form.

However when it comes to customization, like you are describing, it can be a bit tricky because we didn’t intent those snippets to be customizable.

A solution could be to use our Embed SDK, which would give you full control over the embed experience.

You can find many examples on how to use this Embed SDK: on our dedicated Glitch page.

It could look like this:
 

//first form open on load,

typeformEmbed.makePopup('https://admin.typeform.com/to/PlBzgL', {
  mode: 'popup',
  open: 'load'
})


//second form open after scrolling through 30% of the page
typeformEmbed.makePopup('https://admin.typeform.com/to/PlBzgL', {
  mode: 'popup',
  open: 'scroll',
  openValue: 30,
  autoClose: 3,
})


Hope it helps :)

View original

3 replies

picsoung
Typeform
Forum|alt.badge.img+5
  • picsoung
  • Developer Advocate @ Typeform
  • 390 replies
  • Answer
  • February 2, 2021

Hey @Markeeco 

Thank you for your question đź™Ź

We provide snippets to embed your typeform in the Share panel. Those are great because you can change some settings and do a quick copy/paste wherever you need your form.

However when it comes to customization, like you are describing, it can be a bit tricky because we didn’t intent those snippets to be customizable.

A solution could be to use our Embed SDK, which would give you full control over the embed experience.

You can find many examples on how to use this Embed SDK: on our dedicated Glitch page.

It could look like this:
 

//first form open on load,

typeformEmbed.makePopup('https://admin.typeform.com/to/PlBzgL', {
  mode: 'popup',
  open: 'load'
})


//second form open after scrolling through 30% of the page
typeformEmbed.makePopup('https://admin.typeform.com/to/PlBzgL', {
  mode: 'popup',
  open: 'scroll',
  openValue: 30,
  autoClose: 3,
})


Hope it helps :)

M
  • Markeeco
  • Author
  • Explorer
  • 1 reply
  • February 2, 2021

@picsoung Thanks so much for the clear response, this makes a lot of sense and I think we will be able to make this work! I’m thinking I might need to get our senior developer to help me out, but this will be great as we start to explore opportunities to use typeform everywhere! 

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14960 replies
  • February 2, 2021

Thank you, @picsoung !

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