How to use overlay

I want to use the overlay like this:

In my specific page, it says to use this code

<script type="text/javascript" src="" defer></script>

After, add this (I want to add it in a topic)

<button class="cp-button" data-seller="5dd5bbcd1954eb0015e6ff53" data-checkout="rencontre-dans-les-laurentides">Buy now</button>

Is it possible within Discourse?



I believe that you’ll need to make a theme component that will allow you to add the code to a topic. Search “theme #howto”


I tinkered with this a little bit and made a theme component for it because I see a lot of potential.

GitHub - hnb-ku/discourse-checkout

When it’s installed, you’l be able to use something like this in posts and it will automatically be converted to a button.

[wrap=checkout data-seller=5aaa701149321a00145c99b9 data-checkout=ux-animation-tool-license]button text[/wrap]

When that button is clicked, it will show the modal based on the information you add like the seller id and checkout-data

I created a demo for it on theme creator

Everything seems to be working on our side but I haven’t actually bought anything since I haven’t used checkout-page before. Can you try to actually use it @FrancoisD like to buy / sell things and report back?

Once we confirm everything is working, I’ll move this to the theme category.

I also left some comments in the code to explain how this was put together.


Sorry @Johani I was away during holidays!

It is perfect, thanks so much for your time.

1 Like

Hey @Johani, did you have the time to make it as a theme? :slightly_smiling_face:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.