How to add a LemonSqueezy checkout overlay to any Carrd site
First we need the LemonSqueezy overlay code. We can find it by clicking on “Share” next to our product’s name.
Then we click on “Checkout Overlay”.
And now we simply copy the code.
Now we can head over to Carrd.
First we create a button and add the URL (look for href=”THIS_IS_THE_URL”) from the LemonSqueezy Overlay code to it.
Hence we add an “Embed” element in Carrd and add the following code.
This code adds the required LemonSqueezy library that is responsible for the overlay and also adds the class “lemonsqueezy-button” to all link elements that point to LemonSqueezy. This is necessary because otherwise the LemonSqueezy library cannot succesfully interact with these links. Also we have to add the class like this because, as far as I know, you can’t add classes to links directly in Carrd. If you just add the “lemonsqueezy-button” to the button element it won’t work. The class must be attached to the link element itself.
Of course, to make the code work on your site, you have to replace your LemonSqueezy url with your own link.
P.S. I'm now on Twitter too if you'd like to follow my adventures.
Finally, if you're a curious intelligent person, you should definitely join the 5000+ other people on my newsletter. It’s one email a week with everything interesting I’ve learned, read or found.