Sumo Pop Up + HTML Element explanation

Hey guys, I’m looking to integrate sumo.com click trigger & exit intent pop up.

They gave me a piece of code for the click trigger to put on my site, I think I have to use an HTML element and put the class name of the concerned element (in the class it’s the class of the button I’m using)

But I’m not sure how it works, haven’t used webflow in a while & could use some help.

Thanks,
Sacha

Here’s the piece of code from sumo: Click Here


Here is my site Read-Only: https://preview.webflow.com/preview/kaizen-media-c9754a?utm_medium=preview_link&utm_source=designer&utm_content=kaizen-media-c9754a&preview=5d3a121c33c8458100a37c7775903413&pageId=60abaf93c6e595d8420875ab&itemId=60abaf93c6e5957619087681&workflow=preview

hmm, annoyingly sumo doesn’t seem to have any help docs available anymore. It’s been years since I’ve used it so I’m trying to think back how they wanted everything set up. Could you share the code and any info they gave you? The link you added doesn’t work.

Hey Sarah! Thanks for trying to help me.

So when creating a form on Sumo, you have the type of form that you want to use, so I click on “Click Trigger” pop up.

Then they give me that piece of code: Click Here

And that’s it. Nothing else.

I want to use it for a lead magnet on one of my blog articles, here’s the link: https://www.kaizen-media.co/post/mad-scientists-facebook-strategy

As you can see on the screenshot, I’d like the pop-up to trigger when someone clicks on the button that says " Download Your eCommerce…"

My first thinking as I explained in my post was to use an embedded HTML element and use the class, but I’m a newbie when it comes to coding ahah.

@SachaKzn I tried it with a webflow site and it does work with just the embed. It should have since the code in the screenshot is just a link but I wanted to make sure. Install the other code Sumo gives you in the general code settings if you are planning to use the Sumo buttons on all your pages or just in the page settings if you only want to use the button on one page.
I have put together a clonable page for you with the set-up but I haven’t managed to get the styling working yet. I’m a little rusty! Will revisit later but the pop-up does work :slight_smile:
-published page: https://sumo-test.webflow.io/
-read-only link: https://preview.webflow.com/preview/sumo-test?utm_medium=preview_link&utm_source=designer&utm_content=sumo-test&preview=56bb24cf4ba7611a84a4ffa7ecf6e064&pageId=610159dfac028a02fde344ac&workflow=preview
-clonable project: https://webflow.com/website/sumo-test?s=sumo-test

Hey Sarah, thanks for getting back to me!

Could you explain to me how to apply the embed elements to the buttons I created on my website?

Also I’m not sure what code I should put on other parts of my website, because I can only find this piece of code.

Thanks again

@SachaKzn sure. When you signed up to Sumo, they gave you options on installing Sumo. There’s information on how to install it on wordpress, shopify, squarespace or a manual install. The manual installation (in green at the bottom of the page) is the code I’m referring to. This is the piece of code that tells the button (the code in your screenshot) to open the form.


As far as adding the code to your page, it’s easiest through the HTML embed like I did on the demo website. This just gives you a regular link so that’s why I said I was still working on the styling :slight_smile: .

Oh ok I got it! So it’s not possible to apply the Embed to a specific class (in that case my actual buttons)?

@SachaKzn the embed Sumo gives you is a link itself. The <a>..... </a> indicates it’s a link. Any button is a link at its core. You can style a link to look like a link (the underlined text) or like a button (background color etc). In this case, the option would be to style the embed to look like the button you’ve got on your website. Trying to apply a style directly to the html embed in the webflow designer will cause all sorts of odd behaviour. There is another very simple way to apply a style to an html embed but it’s escaping me right now. I’ve been on a break for quite a while doing other things and my code is a little rusty so I’ll take another look at the project I shared with you and let you know :slight_smile: .

fixed the styling and gave you two options on how to add the buttons. Only my internet connection is so slow, it’s not updating the demo site :sweat_smile: . First option with the custom button is live, the second one uses the button you made already but is untested and not published yet. Will try again tomorrow :slight_smile: