Floating Button

Adding Floating Button

Navigate to Floating Button Section

  • Access the settings of your app and locate the section dedicated to floating buttons.

Untitled design - 2024-05-16T151526.643.png

Add Floating Button

  • Within the Floating Button section, locate the option to "Add Floating Button" and click on it to start the process of adding a new button.

Untitled design - 2024-05-16T151544.483.png

Customize Floating Button

  • Upon clicking "Add Floating Button", a dialog box will appear, providing customization options:
    • Upload Icon: Choose an icon for the floating button by uploading an image file. The recommended size is 1024x1024 pixels to ensure optimal resolution.

Untitled design - 2024-05-16T152247.530.png

  • Adjust Background Color: Select a background color for the button to match your app's design theme.

Untitled design - 2024-05-16T152335.371.png

  • Button Position: Determine where on the screen the button will be positioned.

  • URL Redirection: Optionally, specify a URL to which users will be redirected when they click the floating button. Untitled design - 2024-05-16T152358.527.png

  • Select Button Shape: Decide whether the button should have a circular or square shape. Untitled design - 2024-05-16T152418.923.png

    • After customizing the button's appearance and behavior, proceed by clicking the "Next" button.

Untitled design - 2024-05-16T152454.125.png

Set Visibility Settings

  • Choose the visibility settings for the floating button to control where it appears:

Untitled design - 2024-05-16T154745.896.png

  • Show on All Pages: Display the button on all pages of your app.
  • Exact URL: Specify the exact URL of the page where the button should appear.
  • Start with URL: Display the button on pages that start with a specific URL pattern.
    • Select the appropriate visibility option based on your app's requirements.

Save Changes and Rebuild App

  • Once all customization and visibility settings are configured, click on the "Save" button to apply the changes.
  • After saving the settings, initiate the app rebuilding process to implement the floating button with the specified configurations.

Untitled design - 2024-05-16T155725.805.png

Review and Test

  • After rebuilding the app, thoroughly review and test the floating button functionality to ensure it behaves as expected and appears correctly based on the defined visibility settings.

Untitled design - 2024-05-16T160027.899.png