Implement a Typeform Popup into Wordpress Menu

Hi @cschuler Happy Wednesday! Thanks for stopping by the community. Adding a popup to your Wordpress menu involves custom coding a button in the menu and custom coding the popup, which sadly we don’t have an out-of-box solution for. 

@mathio possibly has an example of this, but building this will largely depend on how you’ve already built your Wordpress site. :\

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?

@cschuler 

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

Thanks so much, @ValdemarQ !!

@ValdemarQ - gold mine! thank you

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();
	});
});

Thanks for sharing this, @ValdemarQ !

Let us know what you find out about the hidden params, @ValdemarQ! 

If I use Astra Pro how can I embed typeform un my menu?