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!
Note: When you're done. Take a look at our Advanced Deep Data Integration for BigCommerce.
Installing the Reamaze App
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.
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.
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".
Installing the Default Reamaze Shoutbox Embed
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.
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".
Next, click on the "Templates" folder, then "Layout", and finally "base.html".
</head>tag in your base.html template. Remember to save the file when you're done, apply the new theme, and preview your store.
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.
Customizing the Shoutbox Embed
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:
</head>tag in your base.html template.
Click "Save", apply your theme, and preview your store. The Shoutbox Embed should take on a new look based on what you've designed.
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.
Head on over to our developer site and click on Embeddable Knowledge Base.
Copy the installation script. Note that it's best you create your knowledge base prior to installing an embedded knowledge base.
Go to your page manager in your BigCommerce dashboard and edit the page you wish to install the embedded knowledge on.
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.
When you're done, save the content, then save the page. Preview your store's page to see if the knowledge base shows up.
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:
First use the Reamaze Embed Builder to build the contact form that you like.
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.
Under the "Templates" folder, click on "Components", and then "Page", then "Contact-us-form.html".
Select all and remove the contents of contact-us-form.html.
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.
If you now load the contact form page for your theme, the contact form should now show the Reamaze embedded contact form.
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.
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".
Click on the page that you want to implement the Lightbox on. For example, pick the "Contact" page.
For this example, we will be embedding the Lightbox on the word "Assistance" as detailed in the page content area.
Click on the HTML button on the right side.
Using the Reamaze Embed Builder, build the Lightbox configuration you like. Copy the script snippet, and paste it above the very first paragraph block.
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.