Embedding a Typeform with the Divi Builder

@Liz 

@john.desborough 

Sweet. Thanks for posting @Liz You rock 🎸

@Gabriel 

This isn’t working for me. 

I followed the tutorial exactly. Help appreciated :)

Hi @c4444 If your website isn’t an HTTPS site, you’ll see the message like that one. The post below has a bit more information about this: 

• Embedded Forms Now Require HTTPS

Actually - ignore me. I’ve realised that it only applies site wide when it sits on the home page, and if it’s not on the home page, then you can choose the pages where it does sit. Thanks!

Hi Liz, this is great thank you. 
Is there a way to disable the embedded form from coming up on certain pages?
I have only added the code at the bottom of the home page and it’s coming up site wide. It’s helpful in most cases, but there’s one page (what is looking to become the new home page) which should not have it pop up at all. Any thoughts here would be massively appreciated!
Many thanks,

Martine

Ha glad to hear that you were able to figure it out, @MartineS ! Let us know if we can help with anything else. 😀

Hello,

The embedded protocol & code has changed : 

<div data-tf-live="01HA1WEG0DEFX4073KYY5FCTGW"></div><script src="//embed.typeform.com/next/embed.js"></script>

when previously it was 

<button data-tf-slider="SOzgvVLS" data-tf-position="right" data-tf-opacity="100" data-tf-iframe-props="title=Diagnostic sociologique de votre direction (site)" data-tf-transitive-search-params data-tf-medium="snippet" style="all:unset;font-family:,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#ffffff;color:#0047b0;font-size:22px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;"> Testez notre diagnostic </button><script src="//embed.typeform.com/next/embed.js"></script>

 So we can’t anymore change some parameters as previously like font color, button description, etc. 
Why ? or How can we customize the aspect of the form ?

Thanks

Hi @Kant1 We recently posted about this new feature to the embed here. 😀

• 📣 New feature alert! Live form embedding New feature

Hello! I've successfully integrated a Typeform into my Wordpress site using the Divi builder, and it displays beautifully on Desktop. However, I'm encountering an issue with the Mobile view: the Welcome Screen's button is missing. This problem persists across various browsers. Does anyone have suggestions for resolving this mobile display issue? Thank you for your help!

Hi @FinKratt I hope you’re having a lovely day so far! Could you please include the URL where the form is embedded so we can take a look? Thanks!

Hey @Liz ! Here’s the URL: https://finkratt.com/finkratt-poc/

Thanks, @FinKratt ! I believe the issue is caused because the form is being embedded as an iFrame instead of using the full-screen embed code we provide. 

@mathio would they be able to use the Embed SDK to essentially do the same thing without having to use the standard full-page embed code? 

Hello! I’m embedding my Typeform as a pop-up button in Divi builder, and the issue I’m having is that the container is loading but the javascript is not, and I’m left with an empty box. Any idea how I can tweak this to get it to work? 

Hi @garretcragun Do you mind sharing the URL where we can access the embed? Thanks in advance!

@Liz it’s not currently live on our site, but here’s a testing page where you can see it. It’s the button just beneath the title. (ignore the various design issues, it’s all a bit of a mess)

https://www.batemancollective.com/my-home-2/

Hello @FinKratt 

The Issue

I see you are overriding default typeform CSS and setting height to 100vh:

On mobile browsers, the height of 100vh also includes the space covered by navigation bars. This means the start button on your typeform is rendered under the navigation bar.

When the navigation bar is hidden, the button is visible:

How to fix this?

You will need to make sure the iframe has height if 100% instead of 100vh. You can use the data-tf-full-screen option of embed SDK and the SDK will try to automatically resize the form.

Or, if you need to set the height manually you could set it to 100%. However you need to make sure all parent elements heights are set to 100% as well.

@garretcragun I can see your typeform popup just fine:

Maybe you have some kind of adblock browser extension that prevents our embed SDK from loading? Most adblocks should not but you never know 🤔