How to Set up Widget on Website

The goal of setting up the widget is to allow customers to pre-order items directly from your website. When a customer pre-orders from your site, a modal window will open for them to select the item they want and complete the checkout process.

Pre-order Widget Setup Checklist:

• Access to your website's HTML code
• BackerKit project with pre-order items ready and set to 'open.'

How to Set Up the Widget:

1. Add JavaScript Code to Your Site

   This step integrates the BackerKit pre-order functionality into your website.

   Instructions:

   • Copy and paste the following JavaScript code into your site's HTML:

<script>
(function() {
    var script = document.createElement('script');
    script.src = '<https://www.backerkit.com/assets/preorders.js>';
    script.async = true;
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
})();
</script>

1. Select What You Want to Sell

• You have two options for linking to your pre-order items:

• Option 1: Link to the Entire Pre-order Store

<a href="#" data-bk-preorders="<https://project_subdomain   .backerkit.com/overlay_preorders>">Pre-order Now</a>

• Option 2: Link to an Individual Pre-order Item

<a href="#" data-bk-preorders="<https://project_subdomain   .backerkit.com/overlay_preorders/>[ITEM ID HERE]">Pre-order This Item</a>

1. Replace [ITEM ID HERE] with the specific ID of the item you want to link to. You can find the ITEM ID by navigating to the item's edit page on BackerKit and looking at the URL.

Example: Setting Up a Widget on Square

To integrate the widget on a Square website, follow these steps:

1. Log in to Your Square Account
   • Go to your Square Dashboard.
2. Navigate to the Website Editor
   • Select the site you want to edit if you have multiple sites.
   • Open the website editor.
3. Add a Code Block
   • In the editor, add an HTML code block to the page where you want the pre-order button to appear.
4. Insert the JavaScript Code
   • Copy and paste the JavaScript code into the HTML code block:

<script>
(function() {
    var script = document.createElement('script');
    script.src = '<https://www.backerkit.com/assets/preorders.js>';
    script.async = true;
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
})();
</script>

1. Add the Pre-order Button
   • Below the JavaScript code, add the appropriate HTML link for either the entire pre-order store or an individual item.
   • For the entire store:

<a href="#" data-bk-preorders="<https://project_subdomain   .backerkit.com/overlay_preorders>">Pre-order Now</a>

• For an individual item (replace [ITEM ID HERE] with the actual item ID):

<a href="#" data-bk-preorders="<https://project_subdomain   .backerkit.com/overlay_preorders/>[ITEM ID HERE]">Pre-order This Item</a>

• Replace [ITEM ID HERE] with the specific ID of the item you want to link to. You can find the ITEM ID by navigating to the item's edit page on BackerKit and looking at the URL.

1. Save and Publish Your Site
   • Save your changes and publish the site.

By following these steps, you'll be able to seamlessly integrate BackerKit's pre-order widget into your Square website, providing a smooth and efficient pre-ordering process for your customers.