Typeform Integrated Into X Pro

[RSI-DEV]

Good Day,

I tried to see if there was anything on Typeform integration on the forum or on Typeforms Support, but it is very limited?

I have used some code from other posts, but this does not appear to work with X Pro?

functions.php

function typeform_script() {
 ?>
<script type="text/javascript">jQuery( function($) { $('iframe#typeform-full').prependTo('body'); } );</script>
<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script>
<?php

}

add_action( ‘wp_footer’, ‘typeform_script’, 99999 );

---

Classic Raw Content

    <iframe><div class="typeform-widget" data-url="https://smartcanopy.typeform.com/to/ILG5wd" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script></iframe>

---

Can you point to a thread that deals with Typeform Integration, so I can get it to integrate in to X Pro, thank you in advance

[mldarshana]

Hi There @RSI-DEV

Thanks for writing in! Could you please try following this example here and it should work.

Let us know how it goes.
Thanks!

[RSI-DEV]

Good Morning @mldarshana,

The link goes to a page that does not exist?

It is private?

Kind Regards

[christopher]

Hi RSI-DEV,

Sorry for the wrong link. Let me give you context regarding the case. The Typeform is a 3rd party code which there is no guarantee which it will work with our theme or not and it is outside of our support scope.

Having said that, there is a standard way to add scripts and additional information of any kind in our theme and generally WordPress.

If your TyepForm code contains scripts I suggest that you add them to the HTML Head of the theme. To do that you need to install a Child Theme and add the code below to the functions.php file:

add_action('wp_head', 'head_information', 9999);

function head_information () { ?>
<!-- Your HTML Code Here -->
<?php }

Add the given scripts instead of <!-- Your HTML Code Here --> so for your case, it should be:

<script type="text/javascript">jQuery( function($) { $('iframe#typeform-full').prependTo('body'); } );</script>
<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script>

This is based on your question and you need to check the given code from Typeform to make sure you add the correct information.

After that, you can add a Classic Raw Content element on the page builder and add the code below:

    <iframe id="typeform-full"><div class="typeform-widget" data-url="https://smartcanopy.typeform.com/to/ILG5wd" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script></iframe>

Again the code above may differ, you need to double check the TypeForm given code.

For more information about the best practices in such cases, I suggest that you read this and this article.

Thank you.

[RSI-DEV]

Hi @christopher.amirian,

Thank you for the quick response, I will try that. I think that should work now!

Kind Regards

[christian]

You’re welcome. Glad we could help.