Rebel Developer Hub

Welcome to the Rebel Developer Hub. You'll find comprehensive guides and documentation to help you start working with Rebel as quickly as possible, as well as support if you get stuck. Let's jump right in!

Emails

Batch

Recent Posts

Archive

Hotspots

Hotspots

Introduction

Small hotspots that appear over a background image. When clicked content pops up.

Body

spotAnimation

-Boolean

Should the spots have a pulsing animation or not.

arrows

-Boolean

body description

spots

-Boolean

Should the spots have a small arrow coming out the side or not.

Spots

-Array

Add a value for each hot spot to include.

left

-Number

Position in px from the left side of the background. The px will automatically be converted to % for responsive layouts.

top

-Number

Position in px from the top side of the background. The px will automatically be converted to % for responsive layouts.

placement

-Select

What side should the pop up appear comparative to the hotspot. Options are above, below, left, right, center. If center will place the popup in the center of the component rather than the center of the spot location. All placements are converted to center for mobile.

popupHeight

-Number

Defines the height of the popup box in px.

popupWidth

-Number

Defines the width of the popup box in px.

popupContent.img.href

-URL

Option link applied to the image in the popup.

popupContent.img.src

-URL

Link of image to include

popupContent.img.height

-Number

Image height in px

popupContent.img.width

-Number

Image width in px

popupContent.img.alt

-plain text

Alt text to describe image.

popupContent.h3

-text

Heading text for popup content.

popupContent.p

-text

Paragraph text for popup content.

popupContent.cta.href

-URL

Link for CTA button.

popupContent.cta.text

-text

Text to include in CTA button.

popupContent.cta.width

-number

Width of CTA button in px. If left blank the button will just fit to the text.