This series has proven to be a huge success! We’ve already went through Squarespace and Shopify and now we’re ready to show you what we can do with Bigcommerce. Once you’ve registered for a Reamaze account and integrate it with Bigcommerce we’ll automatically sync pertinent customer information in the conversations view. In addition, you’ll be able to access your Reamaze right through your Bigcommerce dashboard!
In this tutorial, we’re also going to show you how to integrate Reamaze’s JavaScript Shoutbox, Lightbox, and Contact Form right into your storefront.
Let’s get started.
Step 1: Finding the Reamaze App
Log into your Bigcommerce account and click on the “Apps” icon on the left hand corner. Alternatively, you can access the Reamaze app here. Look for Reamaze under “Customer Feedback” or “Live Chat”. Confirm the app and install the Reamaze app to your Bigcommerce store.
Step 2: App Installation
Once Reamaze is installed and you’re logged in we will show you the first script you need to copy and paste. Go ahead and copy it for now. Once you’re back in Bigcommerce, you’ll see that you’re now able to access your Reamaze dashboard by clickng on the Reamaze logo on the left hand rail.
Step 3: Shoutbox
Now we’re going to learn how to install the Reamaze Shoutbox. The Shoutbox is a button that you can place on your site so customers can simply click on it to send you a message. We’ll also go over how to show your FAQ/Knowledge Base first instead of the contact box first.
We’re going to go through some basic HTML here we’ll go slow. First, click on the “Design” link on the top right. When you’re in the screen below, click on “Edit HTML/CSS”. Then click on the HTMLHead.html template on the left hand side.
Now, paste the script you copied earlier right underneath the “head” HTML tag. Don’t worry, if you lost track of that script, you can find it here. It’s called the “Base Installation” script. In addition, copy the “Brand Identification” script and paste it beneath the first script. Make sure to enter your Reamaze subdomain instead of our example subdomain ‘democentral’.
The last script you need is the actual Shoutbox itself. Head on over to the Shoutbox Documentation and copy the “Contact Mode” installation script and paste it beneath the last script. When you’re done, you should have something that looks like the following screenshot (other than the subdomain part of course).
Click “Save” and take a look at your store homepage. It should look like the following. Our shoutbox is orange because that’s our Reamaze brand setting. You can change the color by going to your Reamaze settings. The Shoutbox is represented by the default question mark on the bottom right hand corner. When clicked on, the Shoutbox with the “Contact Mode” will show up.
Step 4: Shoutbox Trigger Customization
Most of you will want to change the default gray question mark “trigger”. Let’s do that now. Head on over to trigger documentation and copy the installation script in the second black box. This is a pre-formatted example that will change your trigger to something more visible. Paste the script beneath in the same HTML template you were editing earlier.
Click save, refresh your homepage and check out the new trigger!
Now let’s say you don’t like that orange color. You can change it easily by entering a color hex code. You can find your’s here. Replace the orignal hex code in the example and save again. We changed our’s to a flashy green and changed the call-to-action to “Contact Us” while we were at it.
Step 5: Shoutbox Self Service Mode
Now lets’ make the Shoutbox show your FAQ/Knowledge Base first. This part is really simple. Head on over to the Shoutbox Documentation again and copy the “Self Service Mode” script and replace the “Contact Mode” script from Step 3. Your template should now look like this:
This is what it now looks like if you save and refresh.
Step 6: Lightbox
We’re going to move onto a different JavaScript widget called the Reamaze Lightbox. The lightbox is different from the Shoutbox because you can have it show up using any trigger of your choice. This could be a line of text or an image already on your website. To make this tutorial easier, we’re just going to be using the standard “Contact Us” page.
To get started, access one of your site pages using the “Web Content” menu. Click on the gear icon to start editing the page.
Now, let’s say we want to make the word “HERE” a Lightbox trigger. When someone clicks on the word “HERE”, the Lightbox will pop up. Find your equivalent and then switch over to editing the text in HTML mode.
Next, head on over to the Lightbox documentation and copy the “Contact Mode” script and paste it around the trigger text or image you want. See below.
As you imagined, the Self Service Mode is also available for the Lightbox. to enable the Self Service Mode, simply copy and paste the second script as such:
The end result should look something like this:
Step 7: Contact Form
Now let’s try adding a contact form to another page. We’re going to use the “Shipping and Returns” page here so feel free to use any page of your choice. The contact form can go anywhere on your site and will take up any horizontal space. Find the page you want to insert the contact form into and access the HTML editing mode.
Head on over to the Contact Form documentation and copy the super simple script on that page. Paste it in the location you want. For this example, we just pasted the script at the very end of the page. Hit save and refresh to take a look.
To change the labels of each default contact form field, head on over to this page for your subdomain: https://YOURSUBDOMAIN.reamaze.com/admin/settings/translate/YOURSUBDOMAIN.
Step 8: Adding Form Fields to Contact Form
To add more fields to the contact form on your site, head on over to the Custom Form Fields documentation and just copy the example script at the bottom of the page. We did just that and changed some of the fields ourselves. In the screenshot below you’ll see that we added a dropdown field with selections for “Did not receive, Major delay, Defective return, Regular delay”.
When done, click save and refresh your page!
Did this help?
Please let us know if you have any questions or tutorial requests!