Answered

How to Add Pop-up Embed on an Existing Button?

  • 25 February 2021
  • 7 replies
  • 3234 views
O

Hi there, 

 

I have a bit of a problem with embedding a Typeform and so far, hasn’t been able to find a solution (I’ve already checked the community, the documentation, even the Stackoverflow). 

My intent is not to add a separate button with my embedded Typeform, but rather enable the pop-up function for an already existing button. This is the page in question: https://mvise.de/in-die-aws-mit-mvise/. The pop-up function should be enabled for the long button in the center of the header. The button in the left bottom corner of the header is a legacy element added with a code. 

 

I tried to take the JS function out of that code and add this function to this specific page via the theme editor, and it would be this function: 

<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", 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>

But for some reason it doesn’t work, and I cannot figure out why not. Can you please help me? :pray:

 

Thanks in advance!

Olga

icon

Best answer by picsoung 27 February 2021, 00:49

View original

7 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @Olga_A thanks for stopping by! :) Have you seen our Embed SDK yet? If not, I would definitely suggest using this to add the typeform URL to your own button. It will require some front-end knowledge, but it will work much better than your current setup. 

Life is a series of awkward moments separated by snacks.
picsoung
Rank
Userlevel 7
Badge +5

Hey @Olga_A 

As ​​​@Liz suggested you could use our Embed SDK to have more control over the embed experience.

You would need to have a function in your button onclick event that would make the popup appear.

<script src="https://embed.typeform.com/embed.js"></script>

<button onclick="openPopup()">
      OPEN POPUP
</button>

<script>
var openPopup = function() {
  typeformEmbed.makePopup("https://form.typeform.com/to/abc123", {
    mode: "drawer_left",
    open: "load",
    autoClose: 3, //close form # seconds after submission
    hideScrollbars: true,
    onSubmit: function() {
      console.log("Typeform successfully submitted");
    },
    onReady: function() {
      console.log("Typeform is ready");
    },
    onClose: function() {
      console.log("Typeform is closed");
    }
  });
};
</script>


Here is a complete project you can remix

O

Hi @Liz , hi @picsoung 

Thanks a lot for your quick replies, I really appreciate that! 

Unfortunately, if I knew how to use Embed SDK I would have done it already; this was the first thing I found. I don’t have any front-end knowledge, so I definitely cannot write anything from scratch, that’s why I need your help, guys. 

The script you shared here, @picsoung, inserts an extra button as well, which is exactly what I don’t want. And like I said, I lack the appropriate knowledge to make this script work for the button I want it to work on. Can you please, please nudge me in the right direction, how do I do this? :pray:

O

So… in the meantime, as far as I understood, I can add a class to my button and then call this class via JavaScript. I added the class #js-caller and tried to modify the code that you @picsoung suggested, but it’s not working for some reason. 


Can you please help me figure out what is wrong with it? :pray:

<script>
(function( $ ) {
    $( "#js-caller" ).on( "click", function() {
			var openPopup = function() {
			  typeformEmbed.makePopup("https://mvise.typeform.com/to/hQ8pLlIN", {
			    mode: "drawer_left",
			    open: "load",
			    autoClose: 3, //close form # seconds after submission
			    hideScrollbars: true,
			    onSubmit: function() {
			      console.log("Typeform successfully submitted");
			    },
			    onReady: function() {
			      console.log("Typeform is ready");
			    },
			    onClose: function() {
			      console.log("Typeform is closed");
			    }
			  });
			};
		});
	})( jQuery );
</script>

 

picsoung
Rank
Userlevel 7
Badge +5

Got it! you were almost there :)

If you already have a button, you should call the `makePopup` function directly in the `click` event listener for this button.

which should give you the following code
 

<script>
(function( $ ) {
    $( "#js-caller" ).on( "click", function() {
			  typeformEmbed.makePopup("https://mvise.typeform.com/to/hQ8pLlIN", {
			    mode: "drawer_left",
			    open: "load",
			    autoClose: 3, //close form # seconds after submission
			    hideScrollbars: true,
			    onSubmit: function() {
			      console.log("Typeform successfully submitted");
			    },
			    onReady: function() {
			      console.log("Typeform is ready");
			    },
			    onClose: function() {
			      console.log("Typeform is closed");
			    }
			  });
		});
	})( jQuery );
</script>

 

O

Thank you so much!! @picsoung :raised_hands: It didn’t work at first either:sweat_smile: , but then I remembered my previous code attempts based on other similar issues I found, and added the line

event.preventDefault();

and it worked!!! And this is huge, ‘cause I had this line before and it was to no use; obviously, because of this extra line 

var openPopup = function() {...}

that I used to have. So, your solution was really, really helpful. 

Thanks again a lot! :bow:

J

@Olga_A, would you mind pasting your final code? I am even less technical skilled and need the same solution that you were looking for.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs