hello :)
I would like to put a responsive typeform popup which I can use as link in my wordpress menu.
Can anyone explain me how to do so?
best wishes
Christine
Best answer by mathio
View original
Userlevel 7
+5
Hi
Userlevel 7
+5
Hello, you can build a button or link to open your popup in the share page and then put the embed code into your page where you want to display the button or link. If you need more complex functionality please see our embed lib docs on how to build a custom popup.
Hello,
I am also intersted in this one, I want Wordpress Menu Button to launch a Typeform pop-up. Custom coding is fine, but some help is needed.
Wordpress Menu item is li element, and link is in a href attribute as indicated.
<li id="menu-item-37"
class="menu-singup menu-item menu-item-type-custom menu-item-object-custom menu-item-37"
data-tf-popup="Vxs1VOeK"
data-tf-hide-header=""
data-tf-transitive-search-params="utm_source, utm_medium,utm_campaign,utm_term,utm_content" data-tf-iframe-props="title=Dermatologo konsultacija internetu - iDerma"
data-tf-medium="snippet">
<a href="https://form.typeform.com/to/Vxs1VOeK">Pradėti konsultaciją</a></li>I have managed to add typform attributes to li element via Jquery, but it somewhat doesnt trigger launch of typform embed. Can anyone point any other solutions, how to make this li element to launch embed? Or it only can be a button that launches embed?
We have found a solution to this problem, it simply requres you to add custom code in DIVI - Theme options - Integration - Add code to the < head > of your blog
Our menu button which should trigger the Embed has id #menu-item-37
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
jQuery(function($){
$('#menu-item-37 a').click(function (e) {
e.preventDefault();
var popup = window.tf.createPopup('sxmSCYSc', {
hideHeaders: true,
transitiveSearchParams: ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'],
iframeProps: {
title: 'Dermatologo konsultacija internetu - iDerma'
},
medium: 'snippet',
hidden: 'utm_source,utm_medium,utm_campaign,utm_term,utm_content'
});
popup.toggle();
});
});
</script>Hope this helps,
Good luck
Userlevel 7
+5
Thanks so much,
Userlevel 7
+6
- Certified Partner & Champion
- 4769 replies
-
17 February 2022
The only thing I noticed, that unfortunately hidden params are not working in this solution, not clear why, working with developers to find out the possible reasons.
hidden: 'utm_source,utm_medium,utm_campaign,utm_term,utm_content'
Some adjustment was needed, here it is:
jQuery(function($){
$('#menu-item-37 a').click(function (e) {
e.preventDefault();
var popup = window.tf.createPopup('sxmSCYSc', {
hideHeaders: true,
transitiveSearchParams: ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'city'],
iframeProps: {
title: 'Dermatologo konsultacija internetu - iDerma'
},
medium: 'snippet',
hidden: {
utm_source: '',
utm_medium: '',
utm_campaign: '',
utm_term: '',
utm_content: '',
city: ''
}
});
popup.toggle();
});
});
Userlevel 7
+5
Thanks for sharing this,
Userlevel 7
+5
Let us know what you find out about the hidden params,
Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.