Supercharge Store

Embed products into your own site

At times, you may want to embed your SellApp products into an external site, but you don't want to go through the hassle of coding and/or interacting with our API to obtain product details and create checkouts for your customers.

Fortunately, we've done all the heavy lifting and provide website embeds out of the box across all SellApp store plans. Embeds let you copy a few lines of code, insert them into your own store, and you're good to go!

Let's dive into how you can do so.


Generating embed code

To start generating embed code, you'll want to navigate to your products dashboard

  1. For the relevant product(s), toggle them on the left hand side next to the product's title

  2. Once you've toggled all of the products you'd like to embed, select the "Generate embed code" option in the navigation bar. Here's how that looks

Toggled embed

  1. A modal will pop up with a HTML file. Here's what you'll want to do:

    1. Copy the <link href="https://cdn.sell.app/embed/style.css" rel="stylesheet" /> and place it in your site's <head> section

    2. Copy the <script src="https://cdn.sell.app/embed/script.js" type="module"></script> and place it right before your site's closing </body> section

    3. Copy the button(s) and place it in the relevant area where your customer will click

Once done, save your site's code and you'll be good to go.

When your customer clicks on the button that you've pasted, our embed will appear and seamlessly guide them through the purchase process.


Embed options

As you may have noticed, the embed button's code has a few options that you can set. Here's what they are:

  1. data-sell-darkmode

    • By default, this is set to false. Our embed is shown in 'normal/light' mode, meaning the embed's background is light and all elements are clear.

    • You can set the value to true if you'd like the embed to be dark mode; this will make the embed's background dark and all elements darker.

  2. data-sell-theme

    • This input accepts a 6-digit HEX color such as #000000 or #FFFFFF. The HEX color passed will be used to style certain elements within your embed, so feel free to personalize it to your liking.

Happy selling!

Previous
Creating notifications