Bigcommerce: How-To

Once you’ve registered for a Re:amaze 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 Re:amaze dashboard right through your BigCommerce dashboard!

We will show you how to install the Re:amaze app for BigCommerce followed by a detailed tutorial article on how to deploy the Re:amaze Shoutbox Embed to your storefront to enable live chat.

Installing the Re:amaze App

  1. Log into your Re:amaze 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

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

Alt text

Alt text

If you don't have an account, provide your details to start a free trial.

Alt text

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

Alt text

Installing a Default or Advanced Re:amaze Shoutbox Embed

To begin, follow the detailed instructions here.

Embedding your Re:amaze FAQ

There are two different ways to embed your Re:amaze FAQ. One, you can use the Embed Builder to design a Shoutbox Embed that loads the FAQ first. Two, you can embed your FAQ in-line with your existing site content. For the first method, follow the tutorial above. We'll discuss the second method below.

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

Alt text

  1. Copy the installation script. Note that it's best you create your FAQ articles prior to installing an embedded FAQ.

Alt text

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

Alt text

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

Alt text

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

Alt text

Implementing a Re:amaze Embedded Contact Form

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

  1. First use the Re:amaze 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 Re:amaze 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.

Implementing a Re:amaze Lightbox Embed

The Re:amaze 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 Re:amaze 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 Re:amaze 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: