Bigcommerce: How-To

Once you’ve registered for a Reamaze account and integrate it with your BigCommerce store(s), we’ll automatically sync pertinent customer information in the conversations view. In addition, you’ll be able to access your Reamaze dashboard right through your BigCommerce dashboard!

In this tutorial, we will show you how to integrate Reamaze’s JavaScript Shoutbox, Lightbox, and Contact Form right into your storefront.

Note: When you're done. Take a look at our Advanced Deep Data Integration for BigCommerce.

Note: If you're looking to enable Weak SSO for your BigCommerce store with customer accounts, please refer to https://support.reamaze.com/articles/bigcommerce-integration-details.

Installing the Reamaze App

  1. Log into your Reamaze and BigCommerce dashboard respectively. If you don't have a Reamaze account already, you can follow the on-screen instructions to sign up for one.

    Alt text

  2. To install the Reamaze app, click on Apps > Marketplace and search for Reamaze. Install the Reamaze app and authenticate. Click "Confirm" to install the app and "Yes" to connect your Reamaze account to your BigCommerce account.

    Alt text

    Alt text

    Alt text

Note: Because Reamaze can support multiple stores and brands, you can confirm that the right store is connected to the right Reamaze brand by going to your Reamaze account and clicking on "Settings" > "Apps" > "BigCommerce".

Alt text

Installing the Default Reamaze Shoutbox Embed

  1. Once installed, follow the Reamaze on-screen modal instructions to install the DEFAULT Reamaze Shoutbox Embed code snippet. Start by copying the JavaScript provided to you in the gray box.

    Alt text

  2. Once copied, we'll need to add it to your storefront's theme HTML. Go to "Storefront Design" in your BigCommerce dashboard. Click on "My Themes". If you've already selected a theme, click on "Advanced". Under "Advanced", select to "Make a Copy". Making a copy will ensure you can easily switch back to your previous theme without adverse effects.

    Alt text

  3. Once a copy has been generated, you can then edit the theme files. Click on the menu button (...) to open the dropdown menu. Select "Edit Theme Files".

    Alt text

  4. Next, click on the "Templates" folder, then "Layout", and finally "base.html".

    Alt text

  5. If you want the DEFAULT Shoutbox Embed, paste the JavaScript snippet code provided to you in Step 1 above the </head> tag in your base.html template. Remember to save the file when you're done, apply the new theme, and preview your store.

    Alt text

  6. The DEFAULT Shoutbox Embed will look like the following on your website. The default experience uses a "Slideout" notification style and is minimally intrusive for your customers. You can always customize the experience further using the Embed Builder found in your Reamaze Settings menu. We'll cover that next.

    Alt text

Customizing the Shoutbox Embed

  1. If you want a CUSTOM Shoutbox Embed, go to your Reamaze Embed Builder found in your settings menu, customize the Embed to your liking. For example:

    Alt text

    Alt text

    Alt text

  2. Once you're done, the Embed Builder will provide you the new JavaScript snippet needed. Paste the JavaScript snippet code provided to you underneath what you pasted earlier, also within the </head> tag in your base.html template.

    Alt text

    Alt text

  3. Click "Save", apply your theme, and preview your store. The Shoutbox Embed should take on a new look based on what you've designed.

    Alt text

Video Tutorial

Embedding your Reamaze Knowledge Base

There are two different ways to embed your Reamaze Knowledge Base. One, you can use the Embed Builder to design a Shoutbox Embed that loads the knowledge base first. Two, you can embed your knowledge base in-line with your existing site content. For the first method, follow the steps above. We'll discuss the second method below.

  1. Head on over to our developer site and click on Embeddable Knowledge Base.

    Alt text

  2. Copy the installation script. Note that it's best you create your knowledge base prior to installing an embedded knowledge base.

    Alt text

  3. Go to your page manager in your BigCommerce dashboard and edit the page you wish to install the embedded knowledge on.

    Alt text

  4. If you already have content, pick the location for where you want the knowledge base to show up. Use the HTML editing mode and paste the copied installation script at that location.

    Alt text

  5. When you're done, save the content, then save the page. Preview your store's page to see if the knowledge base shows up.

    Alt text

Implementing a Reamaze Embedded Contact Form

To embed a Reamaze Contact From and/or replace an existing contact form provided to you via a BigCommerce template, follow the below steps:

  1. First use the Reamaze Embed Builder to build the contact form that you like.

  2. In your BigCommerce account, go to the Theme Editor to edit your theme files. Remember, you should edit the files for a copied theme, not the current theme you're using to avoid mistakes.

  3. Under the "Templates" folder, click on "Components", and then "Page", then "Contact-us-form.html".

  4. Select all and remove the contents of contact-us-form.html.

  5. In your Reamaze Embed Builder, copy and paste both the script snippet and the div snippet. Paste the div snippet underneath the script snippet. and click on save.

  6. If you now load the contact form page for your theme, the contact form should now show the Reamaze embedded contact form.

Video Tutorial

Implementing a Reamaze Lightbox Embed

The Reamaze Lightbox is one of the easiest Embeds to implement. It differs from the Shoutbox Embed in that you can define your own trigger and it does not utilize a floating trigger.

  1. You will not need the theme editor to implement the Reamaze Lightbox. It can be done by editing the pages in your BigCommerce theme. In your BigCommerce dashboard, click on "Storefront Content".

  2. Click on the page that you want to implement the Lightbox on. For example, pick the "Contact" page.

  3. For this example, we will be embedding the Lightbox on the word "Assistance" as detailed in the page content area.

  4. Click on the HTML button on the right side.

  5. Using the Reamaze Embed Builder, build the Lightbox configuration you like. Copy the script snippet, and paste it above the very first paragraph block.

  6. Paste the second div snippet by replacing a word in the paragraph. In this case, we're replacing the word "Assistance". Now, replace the words "YOUR SITES CUSTOM TRIGGER" with the word "assistance". This essentially makes the word assistance a hyperlink but also attaches the necessary div to call the Reamaze Lightbox modal.

Video Tutorial

Non-Stencil Theme Tutorial Video: