This guide is intended to help developers build a custom launcher for the legacy 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;
}
Publishing the LRB through my.productfruits.com just adds our built-in launcher button, which you no longer need because you've created your own. If our default launcher button is still showing on your app, you can remove it by unpublishing it at the top right of my.productfruits.com » your workspace » Help Widgets » Life Ring Button. This will not interfere with the way your custom LRB launcher works.