This guide is intended to help developers build a custom launcher for the Life Ring Button. This will allow you to attach it to a button or other element that you build into your app. You can see a simplified sample of this in the gif below.
productFruits.api.button
let isButtonOpen = false;
as false to keep track of whether the widget is open or not.Example:
function toggleButton() {
if (isButtonOpen) {
button.close();
isButtonOpen = false;
} else {
button.open();
isButtonOpen = true;
}
}
Example:
const button = productFruits.api.button;
let isButtonOpen = false;
function toggleButton() {
if (isButtonOpen) {
button.close();
isButtonOpen = false;
} else {
button.open();
isButtonOpen = true;
}
}
document
.getElementById("toggleButton")
.addEventListener("click", toggleButton);
You need to also create an HTML element with the ID you chose for your Javascript above. Once this is done, you will have your own inbuilt button to start the Product Fruits Life Ring Widget!
You must use custom CSS (accessible from workspace settings) to control where the Life Ring pop-out will be opened. You can use this CSS snippet for that. The example below will pin the pop-out in the bottom right corner.
Example:
.productfruits--lifering-modal {
bottom: 25px !important;
right: 25px !important;
top: auto !important;
left: auto !important;
}