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


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.

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>

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 →