Custom Launcher for the Life Ring Button

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. 

Build Your JS Function

• Assign this JS API call to the button variable: productFruits.api.button 
• Declare the Boolean variable let isButtonOpen = false; as false to keep track of whether the widget is open or not.
• Then add a function that determines the current state of the button.

Example: 

function toggleButton() {
  if (isButtonOpen) {
    button.close();
    isButtonOpen = false;
  } else {
    button.open();
    isButtonOpen = true;
  }
}

• Finally, add an Event listener which triggers when the element is clicked and executes the function above. The final version should be something along the lines of the example below.

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);

Create an HTML Element

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!

Use custom CSS in your Workspace Settings for the Pop-out

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;
}