Answered

Slide tab button stucked on top left

F
Userlevel 3
Badge +2
  • FPBB
  • Sharing wisdom
  • 27 replies

Hello,

I still have the same problem when implementing the form as slide tab on https://c-moins-cher.com : the CTA button is stucked to the top if the website, and this in mobile as in desktop :

 

Any idea why? Other integrations are working perfectly.

icon

Best answer by mathio 22 March 2022, 10:51

View original

18 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @FPBB Nice to see you here again! :grinning: How are you adding the code to your site? Do you mind sending a screenshot? 

Life is a series of awkward moments separated by snacks.
F
Userlevel 3
Badge +2

Hello @Liz , I knew I was forgeting something :grin: . Here it is implemented with WP plugin “insert header and Footer” :

And here is the raw code as copied from my Typeform backend :

<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Thaks in advanced.

Gabi Amaral
Rank
Userlevel 7
Badge +5

Don't forget to send us the URL of your website with the form! Would love to check it out! @FPBB 

Everyone you meet is fighting a battle you know nothing about. Be kind. Always. =)
F
Userlevel 3
Badge +2

Don't forget to send us the URL of your website with the form! Would love to check it out! @FPBB 

Here it is again :wink: : https://c-moins-cher.com

Gabi Amaral
Rank
Userlevel 7
Badge +5

Aaaah amazing! I was so happy I could actually understand the form (I studied French for five years but that was more than 10 years ago!). Happy your form is working fine now! @FPBB 

Do you happen to have other forms embedded in your website? :blush:

Everyone you meet is fighting a battle you know nothing about. Be kind. Always. =)
F
Userlevel 3
Badge +2

This is getting nowhere :no_mouth: .

@mathio or @picsoung or @Liz , can you help here ?

Please go to c-moins-cher.com, you will see that the button is stucked on the top left.

 

 

Here is the code : 

<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Here is how I implemented it , with plugin WP insert header and footer :

 

Thanks in advanced.

mathio
Rank
Userlevel 7
Badge +5

Hello @FPBB 

where would you like to place the button?

I can see in your website that the embed code is placed directly after the opening <body> tag. The button is displayed correctly based on where the embed code is placed.

You need to place typeform embed code in your website in place where you want it to display, not at the very top of the page.

F
Userlevel 3
Badge +2

Thanks @mathio , I realize that this is not a floating button, so this doens’t suits me. It would be really cool if you could make the button floating, it would be a killer tool for lead capture.

mathio
Rank
Userlevel 7
Badge +5

Oh, i think I can see the misunderstanding here! You have embedded your form as slider instead of side tab. If you embed as side tab, it will place a floating button on the right-hand edge of your website. 

F
Userlevel 3
Badge +2

The side tab doesn’t transform well, because the eye catching text is vertical. It would be nice to have an horizontal floating button to open the form.

mathio
Rank
Userlevel 7
Badge +5

In that case you can modify the slider button. Just put together some custom CSS (with absolute or fixed position) to place the button wherever you want.

If you have troubles with the CSS feel free to ask here and show us your work in progress (I can no longer see the typeform button in your page).

F
Userlevel 3
Badge +2

Thanks @mathio , I have temporarly  changed the slider for the popover, but I still think  that the slider with a floating button is a killer. Yet, I am not a coder, so considering that this is my slider code, could you give me a css to make the button floating ?

Many thanks in advanced.

<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
mathio
Rank
Userlevel 7
Badge +5

Hi @FPBB 

side tab gives you a floating button by default. Did you mean to use a slider button embed code?

I will also need more details than “floating”. Where should the button be placed?

F
Userlevel 3
Badge +2

Hi @mathio ,

I mean to use a floating button with the slider, not the side tab.

The floating button would float on the lower part of the screen, at the center, so that it is always on the user’s vew when the user scrolls down.

mathio
Rank
Userlevel 7
Badge +5

In that case you need to start with slider embed code, like this:

<button data-tf-slider="yFtBVbMe" class="my-custom-typeform-button">
  Click here!
</button>
<script src="//embed.typeform.com/next/embed.js"></script>

And to customize the button looks you can add custom CSS (inside <style> or .css file of your page):

.my-custom-typeform-button {
  cursor: pointer; 
  padding: 10px 20px;
  border-radius: 8px;
  background: #fed700;
  border: none;
  color: black;
  font-size: 16px;
  transition: background 0.25s linear;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.25);

  /* this is the important part to position the button */
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
}

.my-custom-typeform-button:hover {
  background: #ffeb3b;
}

You can find an example here: https://glitch.com/edit/#!/maddening-calico-cyclamen

Feel free to remix it and play around with it.

F
Userlevel 3
Badge +2

Thanks for your efforts and your professionalism @mathio , we are nearly there 😜.

It’s working except for 2 things : the background color button #fed700 is not displaying, and the it looks like the button is displayed “behind” the design : https://www.screencast.com/t/mSytqbGzeh.

 

Feel free to see it here : c-moins-cher.com 

 

Here is where  and how I put the button script :

 Here is how and where I  put the css code :

 

 

mathio
Rank
Userlevel 7
Badge +5

To override default button background you can use !important like this:

background: #fed700 !important;

And to make sure it is placed above all other content you can set its z-index:

z-index: 999;

 

F
Userlevel 3
Badge +2

Thanks a lot @mathio it’s working 👏🍾!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs