How to use the CSS code

To move the widget, add the code shown below into the header of the website, directly above the closing </head> tag.

<style>
/* launcher style */
#cheerlink-launcher-container {
	bottom: 50px !important;
	left: 50px !important;
	z-index: 300 !important;
}

/* chat widget style */
.cheerlink-messenger-frame {
	bottom: 50px !important;
	left: 50px !important;
	z-index: 300 !important;
}

@media only screen and (max-width: 980px) {
	#cheerlink-launcher-container {
		bottom: 20px !important;
		z-index: 2000 !important;
	}
	.cheerlink-messenger-frame {
		bottom: 20px !important;
		left: 20px !important;
		z-index: 2000 !important;
	}
}
</style>

The  #cheerlink-launcher-container and .cheerlink-messenger-frame controls the placement of the widget on both desktop and mobile devices.

Position (higher/lower/left/right)

The keywords top, bottom, left, right control the position of the widget on mobile devices (it overrides the first rule), allowing to specify the target screen size as well. If you just want to move the widget for mobile devices, only change those keywords value - or look at the code above - if you want to move the chat only on desktop.

The value of the movement is represented by 'px'.

The direction of the movement is set by the first value in the { } brackets:

• top - means 'away from the top'
• bottom - means 'away from the bottom'
• left - means 'away from the left'
• right - means 'away from the right'

Using a negative px value (e.g. setting it to -100px) will move it in the opposite direction, so e.g. if you'll type in bottom: -100px the code, the chat will go downwards for 100pix on the website.

Layering (top/underneath)

z-index - controls the stacking order of overlapping elements; elements with a higher z-index appear in front of those with a lower z-index .