Integration Document

Written By Devin O'Neill ()

Updated at April 15th, 2025

Purpose Of Integration Specification Document

  • The purpose of this document is to provide guidelines to the client for integrating Customer Loyalty, Questions & Answers, Refer a friend, Reviews & Ratings, Social login, and Visual Commerce for the BigCommerce platform.
  • By using this document, a client or site admin can integrate Customer Loyalty, Questions & Answers, Refer a friend, Reviews & Ratings, Social login, and Visual Commerce on the BigCommerce platform.
  • This document also contains steps required for creating the application, installation process, SA admin setting, and site admin configuration process.

Customer Loyalty

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com)
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: Add some technical things which are listed below: 
  • After filling in the above URLs, fill in the OAuth scope of the following fields.
  • Here's a breakdown of what the user needs to do for each field:
  1. Orders: Select the MODIFY tab.
  2. Order Transactions: Select the MODIFY tab.
  3. Customer: Select the MODIFY tab.
  4. Content: Select the MODIFY tab.
  5. Checkout Content: Select the MODIFY tab.
  6. Carts: Select the MODIFY tab.
  7. Checkout: Select the MODIFY tab.
  8. Information & Settings: Select the READ ONLY tab.
  9. Sites & Routes: Select the READ ONLY tab.

  10. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to special considerations or directions for using the application's different features.
  11. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application 

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.
  • APP Page: The following window appears, Click the Apps button as shown in the following image.
  • Click the My Apps button as shown in the following image.
  • My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.
  • This section displays all the applications created by the user as shown in the image.
  • Open Application and Install: Open the Annex Cloud Customer Loyalty application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.
  • Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.
  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
  1. Site Id: Enter the site id provided by Annex Cloud.
  2. Account Creation Action: Enter the create an account action id provided by Annex Cloud.
  3. Newsletter Action: Enter the signup for the newsletter action id provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the ‘How to Setup Customer Loyalty' Tab: In the new window that appears, navigate to the How to Setup Customer Loyalty' tab. This tab provides instructions on how to set up a customer loyalty program.
  • Follow the Setup Instructions: Follow the instructions provided in the How to Setup Customer Loyalty tab. These instructions guide the user through the steps to set up the customer loyalty program.

Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: If the theme is already copied, do not copy it again.

  • After making a copy of the theme, apply that theme and click on Advanced > Edit Theme Files as shown in the following image.
  • Navigate to template > components > account > navigation.html and add the following code before the ul tag closes.

Questions & Answers

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com).
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: Add some technical things which are listed below: 
  • After filling in the above URLs, fill in the OAuth scope of the following fields.
  • Here's a breakdown of what the user needs to do for each field:
  1. Customer: Select the READ-ONLY tab.
  2. Content: Select the MODIFY tab.
  3. Checkout Content: Select the MODIFY tab.
  4. Themes: Select the MODIFY tab.
  5. Information & Settings: Select the READ ONLY tab.

  6. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to any special considerations or directions for using the application's different features.
  7. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making any other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.
  • APP Page: The following window appears, Click the Apps button as shown in the following image.
  • Click the My Apps button as shown in the following image.
  • My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.
  • This section displays all the applications which are created by the user as shown in the image.
  • Open Application and Install: Open the Annex Cloud Questions and Answers application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.
  • Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.
  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
    • Site Id: Enter the site id provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the ‘How to Setup Questions and Answers' Tab: In the new window that appears, navigate to the How to Setup Questions and Answers' tab. This tab provides instructions on how to set up a Q&A program.
  • Follow the Setup Instructions: Follow the instructions provided in the 'How to Setup Questions and Answers' tab. These instructions guide the user through the steps to set up the Q&A program.
  • Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: Do not copy it again, If the theme is already copied.

  • After making a copy of the theme, apply that theme and click on Advanced > Edit Theme Files as shown in the following image.
  • Navigate to template > pages > product.html and add the following code as shown in the following image.
<div id='socialannex'> </div> <div id='sa_s23_qa_count'></div>

Refer a Friend

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com).
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: In this window, you have to add some technical things which are listed below: 
    1. Auth Callback URL: Enter auth callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s2/BigcommerceCallback.php
    2. Load Callback URL: Enter load callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s2/setup.php
    3. Uninstall Callback URL: Enter uninstall callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s2/bigcommerce_uninstall.php
  • After filling in the above URLs, fill in the OAuth scope of the following fields.
  • Here's a breakdown of what the user needs to do for each field:
  1. Customer: Select the MODIFY tab.
  2. Content: Select the MODIFY tab.
  3. Checkout Content: Select the MODIFY tab.
  4. Themes: Select the MODIFY tab.
  5. Information & Settings: Select the READ ONLY tab.
  6. Sites & Routes: Select the READ ONLY tab.


  7. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to any special considerations or directions for using the application's different features.
  8. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making any other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.
  • APP Page: The following window appears, Click the Apps button as shown in the following image.
  • Click the My Apps button as shown in the following image.
  • My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.
  • This section displays all the applications which are created by the user as shown in the image.
  • Open Application and Install: Open the Annex Cloud Refer a friend application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.
  • Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.
  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
  1. Site Id: Enter the site id provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the ‘How to Setup Refer a friend' Tab: In the new window that appears, navigate to the How to Setup Refer a friend' tab. This tab provides instructions on how to set up an RAF program.
  • Follow the Setup Instructions: Follow the instructions provided in the How to Setup Refer a Friend tab. These instructions guide the user through the steps to set up the RAF program.

Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: Do not copy it again, If the theme is already copied.

  • After making a copy of the theme, apply that theme and navigate to Advanced > Edit Theme Files as shown in the following image.
  • Navigate to templates > components > Common > footer.html and add the below link in the footer.html file as shown in the following image.
<a href="YOUR_STORE_URL/referafriend/">Refer A Friend</a>

Note: In the above code, replace YOUR_STORE_URL provided by BigCommerce.

Reviews & Ratings

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com).
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: In this window, you have to add some technical things which are listed below:
    1. Auth Callback URL: Enter the auth callback URL which is provided by the Annex Cloud. i.e. index
    2. Load Callback URL: Enter the load callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/setup.php
    3. Uninstall Callback URL: Enter the uninstall callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/bigcommerce_uninstall.php

After filling in the above URLs, fill in the OAuth scope of the following fields.
Here's a breakdown of what the user needs to do for each field:

  1. Content: Select the MODIFY tab.
  2. Themes: Select the MODIFY tab.
  3. Information & Settings: Select the READ ONLY tab.

  4. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to any special considerations or directions for using the application's different features.
  5. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making any other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.
  • APP Page: The following window appears, Click the Apps button as shown in the following image.
  • Click the My Apps button as shown in the following image.
  • My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.
  • This section displays all the applications which are created by the user as shown in the image.
  • Open Application and Install: Open the Annex Cloud Ratings & Reviews application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.
  • Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.
  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
  1. Site Id: Enter the site ID provided by Annex Cloud.
  2. Template Id: Enter the template ID provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the How to Setup Ratings and Reviews Tab: In the new window that appears, navigate to the How to Setup Ratings and Reviews tab. This tab provides instructions on how to set up an R&R program.
  • Follow the Setup Instructions: Follow the instructions provided in the How to Setup Ratings and Reviews tab. These instructions guide the user through the steps to set up the R&R program.

Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: Do not copy it again, If the theme is already copied.

  • After making a copy of the theme, apply that theme and click on Advanced > Edit Theme Files as shown in the following image.

Navigate to templates > pages > product.html as shown in the following image.

Add the following div in the product.html file to display R&R top section.

<div id="socialannex-reviewrating-top"></div>

Add the following div in the same file to display the R&R bottom section.

<div id="socialannex-reviewrating-bottom"></div>

Social login

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com).
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: In this window, you have to add some technical things which are listed below:
    1. Auth Callback URL: Enter auth callback URL which is provided by the Annex Cloud. i.e. index
    2. Load Callback URL: Enter load callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/setup.php
    3. Uninstall Callback URL: Enter uninstall callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/bigcommerce_uninstall.php

After filling in the above URLs, fill in the OAuth scope of the following fields.
Here's a breakdown of what the user needs to do for each field:

  1. Orders: Select the MODIFY tab.
  2. Order Transactions: Select the MODIFY tab.
  3. Customers: Select the MODIFY tab.
  4. Content: Select the MODIFY tab.
  5. Checkout Content: Select the MODIFY tab.
  6. Carts: Select the MODIFY tab.
  7. Checkouts: Select the MODIFY tab.
  8. Information & Settings: Select the READ ONLY tab.
  9. Sites & Routes: Select the READ ONLY tab.

  10. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to any special considerations or directions for using the application's different features.
  11. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making any other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.

APP Page: The following window appears, Click the Apps button as shown in the following image.

Click the My Apps button as shown in the following image.

My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.

This section displays all the applications which are created by the user as shown in the image.

Open Application and Install: Open the Annex Cloud Social login application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.

Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.

  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
  1. Site Id: Enter the site ID provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the How to Setup Social login Tab: In the new window that appears, navigate to the How to Setup Social login tab. This tab provides instructions on how to set up a Social Login program.
  • Follow the Setup Instructions: Follow the instructions provided in the How to Setup Social Login tab. These instructions guide the user through the steps to set up the Social Login program.

Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: Do not copy it again, If the theme is already copied.

After making a copy of the theme, apply that theme and navigate to Advanced > Edit Theme Files as shown in the following image.

Add the Javascript in the "login.html" file

Navigate to template > pages > auth > login.html and add the following code as shown in the following image.

<script type="text/javascript">     window.S13AsyncInit=     function(){         var windowHost = window.location.host;         var windowProtocol = window.location.protocol;         var handleLoginUrl = windowProtocol+'//'+windowHost+'/handlelogin';         SAS13Obj.init({siteid:SITE_ID,bigcomSite:true},handleLoginUrl);     }; (function(d){ var js, id = 'socialannex-s13', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true;     js.src = "https://cdn.socialannex.com/partner/SITE_ID/s13.js"; ref.parentNode.insertBefore(js, ref);     }(document)); </script>

Note: In the above code, replace SITE_ID with the site id provided by the Annex Cloud (for staging & production sites).

Add a div tag on the web pages where you want to display standard login buttons

In the below window, you will get the two div tags; copy those tags and paste them into web pages where you want to display the standard login buttons.

Add the following div to display large buttons:

<div id='show_provider'></div>

Add the following div to display small buttons:

<div id='show_provider_small'></div>

Visual Commerce

Steps to Create an Application

Follow the instructions to create an app in the BigCommerce development account, here's how the user can do it step by step:

  • Access My Apps: Navigate to the BigCommerce developer portal and log in to the developer account. Click My Apps to open the login window. (https://developer.bigcommerce.com).
  • Login Window: After clicking on My Apps, a login window appears where the user needs to enter the developer account login credentials and click the Login button to proceed.
  • My Apps Page: Once the user logged in. Click Create an app which is highlighted with a red box.
  • Create App Popup: A popup window appears after clicking Create an app. In this popup, the user needs to enter the application name and click Create within the popup to initiate the process of creating the app.
  • Add Information: After clicking Create, the user is directed to a new window to add information about the application.
  1. Add Summary: Add the contact information about the developer or company.
  2. Technical: In this window, you have to add some technical things which are listed below:
    1. Auth Callback URL: Enter the auth callback URL which is provided by the Annex Cloud. i.e. index
    2. Load Callback URL: Enter the load callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/setup.php
    3. Uninstall Callback URL: Enter the uninstall callback URL which is provided by the Annex Cloud. i.e. https://api.socialannex.com/bigcommerce/s28/bigcommerce_uninstall.php
  • After filling in the above URLs, fill in the OAuth scope of the following fields.
  • Here's a breakdown of what the user needs to do for each field:
  1.  Customer: Select the MODIFY tab.
  2. Content: Select the MODIFY tab.
  3. Checkout Content: Select the MODIFY tab.
  4. Themes: Select the MODIFY tab.
  5. Information & Settings: Select the READ ONLY tab.

  6. Text Instructions: Fill in the required text instructions in the provided window. These instructions pertain to any special considerations or directions for using the application's different features.
  7. Update & Close: After specifying the OAuth scopes, filling in text instructions, and making any other required changes, click Update & Close to save your modifications and create the application with the specified OAuth scopes.

Steps to Install an Application

Follow the steps to install the Big commerce application.

  • Access BigCommerce developer portal: Navigate to the BigCommerce developer portal and log in to the developer account https://login.bigcommerce.com.
  • APP Page: The following window appears, Click the Apps button as shown in the following image.
  • Click on the My Apps button as shown in the following image.
  • My Draft Apps: After clicking the My Apps button, the following window appears where the user needs to click the My Draft Apps tab.
  • This section displays all the applications which are created by the user as shown in the image.
  • Open Application and Install: Open the Annex Cloud Visual Commerce application. Locate the Install button highlighted with a red box in the provided screenshot and click Install.
  • Confirmation: After clicking the Install button, Click Confirm in the window that appears to confirm the installation.
  • Successful Installation: Once the installation is successful, a new window appears.
  • Enter Required Information: In the newly appeared window, the user needs to enter specific information:
  1. Site Id: Enter the site id provided by Annex Cloud.
  • Submit the Information: Click Submit to submit the entered information.
  • Navigate to the ‘How to Setup Visual Commerce' Tab: In the new window that appears, navigate to the How to Setup Visual Commerce' tab. This tab provides instructions on how to set up a VC program.
  • Follow the Setup Instructions: Follow the instructions provided in the How to Setup Visual Commerce tab. These instructions guide the user through the steps to set up the VC program.

Navigate to Storefront > My Themes > Advanced > Make a Copy as shown in the following image.

Note: Do not copy it again, If the theme is already copied.

After making a copy of the theme, apply that theme and click on Advanced > Edit Theme Files as shown in the following image.

To set up the home page, navigate to template > pages > home.html and add the following code.

<div id='sa_s22_instagram' class='sa_s22_instagram_home' style='margin-top: 60px;'></div> <div class='clear'></div>

To set up a product page, navigate to template > pages > product.html and add the following code.

<div id='sa_s22_instagram' class='sa_s22_instagram_product'></div>

To set up the category page, navigate to template > pages > category.html and add the following code.

<div id='sa_s22_instagram' class='sa_s22_instagram_category'></div>

Related Articles

OneView Commerce POS Integration Document

Introduction Annex Cloud is a loyalty program solution provider. Annex Cloud offe...

Magento Integration Document

Purpose of the Document This document provides comprehensive guidelines and step-...

SAP Customer Data Cloud Integration Document

SAP Customer Data Cloud Integration Document This document outlines the steps to ...

Feature Document

Objective The purpose of this document is to describe the features supported on B...