Show Developer Menu

Lightbox Integration

Contact Mode

If you'd like to forgo Reamaze's default trigger, using the Reamaze Lightbox with a custom trigger can be a great option. This lets you to attach a help lightbox that allows your customers to contact you, creating new conversations in your Reamaze support channel. If you have Live Chat enabled on your account, the lightbox will also provide users with the Live Chat experience.

Widget lightbox

Installation

Make sure you have the Reamaze.js snippet installed from the Installation Step.

<a href="#" data-reamaze-lightbox="contact">Your Site's Custom Trigger</a>

Anywhere on your site, you can simply place an HTML element with a data-reamaze-lightbox attribute to have it trigger your support lightbox.

Anonymous Guest Mode

You can opt to remove the up-front Name and Email fields on the Reamaze Shoutbox and Lightbox to allow Guests to leave a message with no further fields. Learn more at Anonymous Guests →.

Customizing Lightbox Width and Height

<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-width="{{ CUSTOM_WIDTH }}" data-reamaze-lightbox-height="{{ CUSTOM_HEIGHT }}">Your Site's Custom Trigger</a>

Using optional attributes data-reamaze-lightbox-weight and data-reamaze-lightbox-height will allow you to adjust the width and height of the lightbox. The default values are 650 and 400, respectively. This is only honored on non-mobile devices. The Reamaze lightbox is responsive and will render differently on small screen devices.

Forcing Messages to a Specific Channel

Your Reamaze Account can manage multiple channels. For example, you might have a channel for "Support" and another for "Sales". By default, the customer will be given the option to select amongst Visible channels for their message. You can also force a specific channel using the following.

<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-channel="{{ CHANNEL }}">Your Site's Custom Trigger</a>

Replace {{ CHANNEL }} with the desired Channel ID from your Account. You can find your Channel ID values under Account IDs and Secret from within your Account Settings.

Customizing Lightbox Colors and Text/Language

You can personalize your Brand's Reamaze.js lightbox without touching any code! You'll just need to go to Brand Settings to adjust your preferences. The lightbox will then load with your selected color and text settings.

Custom Contact Form Fields

Your lightbox contact form can also display custom fields like text boxes and dropdowns. When your customers enter values in these custom fields, they'll be displayed along with the submitted conversation within Reamaze. Documentation for this is covered in Custom Form Fields

Alternative Trigger for Shoutbox

Your custom lightbox trigger can also be used as an alternative trigger for your shoutbox if it's installed on the page. You can do so by adding the data-reamaze-lightbox-anchored attribute to the trigger element to signify that it should trigger the shoutbox.

<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-anchored="true">Your Site's Custom Trigger</a>

Advanced Options

The Lightbox also supports additional HTML data attributes which you can use to customize behavior.

  • data-reamaze-lightbox-title allows you to set the Lightbox title to a specific string value.
  • data-reamaze-lightbox-disable-chat allows you to disable live chat in the Lightbox, even when staff are available and live chat is otherwise enabled. true or false are possible values.

Next Step

If you'd like to open your lightbox with your knowledge base instead of the contact form, it's very easy to set up.

Next: Knowledge Base Lightbox →