Question

Custom embed popup button in webflow

  • 15 May 2024
  • 4 replies
  • 61 views
L

Hi, 

I'd like to edit the button click area on Webflow, but I can't do it. 
I want to use my own button, so far so good. The only problem is that I can't get the whole clickable area to go back to the popup embed form. I'd like to be able to click anywhere in my custom button to open the embed typeform.
 

Here you can have a look about my issue

Thanks :)

4 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @Le j Thanks for stopping by the community! If you’re using the embed code we provide, we can definitely help troubleshoot that. Though, I’m afraid we’re not the most helpful with custom code since it’s code we’re not entirely familiar with. 

In case anyone here happens to be good with coding, do you mind sharing the URL where you have the button so we can look at the code? 

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

Hello,

 

Thanks for the reply.
I’m using the embed code provide, but I can’t manage to custom the size of the button, the font, … 

Any help on that ?

picsoung
Rank
Userlevel 7
Badge +5

Hi @Le j 

To help us debug, could you share the page where this button is and the code you used?

You can read more about the modal embed code in our developer documentation

L

Hi,

 

Sorry for the delay…

Thanks for trying to help me :) 

 

Currently, the button with the animation isn't on any site, as I haven't managed to make it yet. The site is made on webflow 

Here’s the code I have tried for the button.

Thanks in advance :

<div id=“typeform-embed”>
  <a href=“#” id=“typeform-link” data-tf-live=“01HWCRN96J31PYY4ZY786CZWFH” class=“button-primarynew”>
    <!-- Contenu du bouton -->
  </a>
</div>
<script src=“//embed.typeform.com/next/embed.js”></script>
<style>/* Style pour le texte dans le lien */
#typeform-link * {
  color: black !important;
  text-decoration: none !important;
  font-family: ‘Clashdisplay Variable’, sans-serif;
  font-size: 1rem;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: none;
  background-clip: border-box;
  object-fit: fill;
}/* Styles de votre bouton */
.button-primarynew {
  overflow: visible;
  min-width: 100%;
  margin-top: 0px;
  padding-top: 12px;
  padding-right: 0px;
  padding-bottom: 12px;
  padding-left: 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #F5EF4C;
  pointer-events: auto;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease;
  font-family: ‘Clashdisplay Variable’, sans-serif;
  color: hsla(0, 0.00%, 0.00%, 1.00);
  font-size: 1rem;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: none;
  background-clip: border-box;
  object-fit: fill;
}.button-primarynew:active {
  background-color: #43464D;
}.button-primarynew:tiny {
  width: 100%;
  min-width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 14px;
  object-fit: cover;
}
</style>

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs