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

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. 

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

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? 

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?

<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>

Thank you so much!! @picsoung  It didn’t work at first either , 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! 

@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.