Our embeddable checkouts may be used anywhere that supports embedding custom JavaScript files and custom HTML. This includes Webflow, provided you're on a paid plan that supports this feature.

Here's a quick run through of how to do this, using an embedded Beam Checkout themed Commerce Ray. See here for more information on different ways to sell with Chec.

Create a Commerce Ray

To start off, ensure you've got a Beam Checkout themed Commerce Ray created. To do this, click on "Commerce Rays" in the dashboard navigation, then add a new Ray and choose the "Beam Checkout" theme. This theme is designed to be embeddable, so there's an "Embed" option in the options menu to get your code snippets:

When you click on "Embed" you will be given two methods for embedding your checkout. You can either embed it directly as an iframe, which allows the checkout to appear as if it's a native part of your website (i.e. no borders, matching colours etc), or you can have an overlay open up when a button is clicked, which is what we'll look at in this example.

Add custom JavaScript to your Webflow page

Next you will need to add the JavaScript file in the screenshot above (the lower part) to your page in Webflow so it will be loaded for your customers. You can copy the <script ...></script> tag from the example above.

For this example, select the "Settings" option for the page in your "Pages" list that you want to add custom code to. At the bottom of this panel is a section to add custom JavaScript. This is where you should paste your script tag:

Once you've added your script tag, click "Save" to close the settings panel.

See here for more information on adding custom JavaScript to your Webflow pages.

Add a trigger to open your checkout

The final step is to either add a button, or enable an existing button in your site, to trigger the embedded checkout overlay to open. Typically this will be a button like "Buy now". If you don't have one in your Webflow page yet, add one now:

When you have one, you can add custom attributes to your page elements. You'll want to add a custom attribute called data-chec-embed-url and give it the value of your Commerce Ray. This is available in the <a> section of the embed code from the screenshot above.

Once this is added, publish your site to see the changes reflected on your frontend. Now when you click your "Buy now!" button, you will see your embedded Commerce Ray checkout:

Did this answer your question?