🌐Embeds

The most simple and intuitive way to integrate SellSN with your existing website

What are embeds?

Embeds are a essentially a system that allows you to embed the SellSN payment system right into your website with minimal code or effort. You can make a button that opens a modal that automatically allows your customers to sign-in and purchase a product - all in one window.

The embed system in action

The embed system does not work with the button HTML tag automatically on most JavaScript frameworks like Next.js, React, Svelte, Angular, etc. Follow the 'Advanced integration' section to find out how to work with the embed system.

Integrating the system

Integrating the embeds system is as simple as 1, 2, 3 (and four). Follow the below steps to get started.

1. First, we need to get the code snippet from the product you wish to embed. The embed system works for any product on your store, but you need a button that can trigger it to open. Head over to the 'Edit product' page on the SellSN dashboard.

Click the 'Edit product' button on the product you want to embed on your website.

Then, head over to the 'Embeds' section on the bottom of the page, you can then find the code snippet to embed that specific product on your website.

You can use the button on the top right corner to copy all the code to your clipboard.

The following attributes can be applied to any button on the same page, you do not need to import the script multiple times.

Attribute	Type	Description
data-sellsn-sid	UUID (required)	The ID of the store that the given product ID belongs to
data-sellsn-pid	UUID (required)	The ID of the product that should be embedded
data-sellsn-email	Email (optional)	The email address to autofill on the embed, this is useful when using the system beside an existing login system

You can use classes, styles and any usual system except Javascript click handlers as they may override the click handler registered for qualifying buttons on the page load.

Advanced integration

This section details how to integrate the embeds system without the button binding system (the attributes system detailed above), this is best suited for advanced applications that don't use typical HTML/CSS/JS stacks and rather use JS frameworks like Next.js, React, Svelte or Angular.

Here is a list of JavaScript APIs that you can use to still leverage the same beautiful and simple embed modal system:

Function	Arguments	Description
window.initializeSellSnEmbed	None	Initializes the SellSN modal system, must be called first before any other function is called. By default this is ran on load, but with some JavaScript frameworks it may need to be manually called.
window.openSellSnModal	storeId: string, productId?: string, groupId?: string, email?: string	Opens the SellSN embed modal, when this function is used instead of the data attributes the arguments are required. The email is optional and either the productId or groupId must be specified.
window.closeSellSnModal	None	Closes the open SellSN modal.

Example

Here is a simple example with some common JavaScript frameworks of all theses functions.

SvelteKit

<script lang="ts">
    import { onMount } from 'svelte';
    import { browser } from '$app/environment';
    
    onMount(() => {
        if (browser) {
            window.initializeSellSnEmbed();
        }
    });
    
    function openModal() {
        window.openSellSnModal('storeId', 'productId');
    }
    
    function openGroupModal() {
        window.openSellSnModal('storeId', null, 'groupId');
    }
    
    function openGroupEmailModal() {
        window.openSellSnModal('storeId', null, 'groupId', 'email');
    }
    
    function openEmailModal() {
        window.openSellSnModal('storeId', 'productId', null, 'email');
    }
    
    function closeModal() {
        window.closeSellSnModal();
    }
</script>

<button type="button" on:click={openModal}>Open modal</button>

<script type="text/javascript" src="https://pay.sellsn.io/embed.min.js"></script>

Content Security Policy (CSP)

The SellSN embedding system is fully usable with a CSP setup. You can use the following directives to configure your CSP to work with the system.

frame-src: https://pay.sellsn.io
style-src: https://pay.sellsn.io/embed/embed.min.css
script-src: https://pay.sellsn.io/embed.min.js