This article provides the steps and resources to support the task of integrating any website with the Fuuz Browser Extension.

1. Installation
   
2. Action Button
   
1. Action Button Type: Document
   
2. Action Button Type: Navigate
   
3. Action Button Type: Screen
   
4. Action Button Type: Data Flow
   
5. Action Button Type: Visualization
   
6. Action Button Type: CSS
   

Installation

 The Fuuz Browser Extension is public and available in the Google Store:

• https://chrome.google.com/webstore/search/Fuuz?hl=en

Install the Fuuz Browser Extension.

Access the Fuuz Browser Extension through Google Extension Menu.

Click on the Extensions or jigsaw icon in Chrome (top, right).

The extension can be pinned onto the Chrome Extension bar by clicking on the pin or thumbtack icon (next to the extension).

Click on the Fuuz icon to log in.

Wait for the login screen to appear.

Type in the Email.

Type in the Password.

Type in the Subdomain.

In the example, https://training.fuuz.app, the subdomain is training.

If the Use API Key checkbox is selected, the API key may be used instead of a password.

Refresh the page, if prompted, before using Fuuz.

Wait for the extension to open.

Choose to use it with the current Website, the current Webpage, or both.

Refresh the page again, if prompted.

Locate the Fuuz panel (left edge of the screen).

Click this panel open Fuuz within the site or page.

The menu allows Fuuz to interact within the site or page.

Clicking the gear icon.

Select Add new to add new action buttons in the menu.

When in edit mode, the gear icon will be orange.

Everything is in context to the screen, so it is possible to integrate anything.

Take parameters from any inputs, the URL, or anything hidden on the current screen, and pass that into the Fuuz application.

The different types of action buttons that can be added to the menu are:

1. Webhook
   
2. Document
   
3. Visualization
   
4. Navigate
   
5. Data Flow
   
1. _ screen
   
2. _ CSS
   

Action Button

Action Button Type: Document

To call a document:

1. Select Document as the Type.
2. Open the Fuuz drop-down menu.
   
3. Select the document.
   

1. Type in a name for the action button.
   
2. Click on the blue + icon (bottom) to add parameters.
   
3. Click Save.
   
4. Click the gear icon to get out of edit mode.
   

This example shows how to pass in an ID parameter.

1. Select the type as Querystring.
   
2. Select the value as ID.
   
1. This is the ID in the URL
   
2. In the example, it 6088
   
3. This is the unique identifier from the page 
   

1. Click the gear icon to get out of edit mode.
   

Click the Document icon to call the action button.

Wait for the Fuuz document to pass the ID from the screen.

Action Button Type: Navigate

To navigate to another webpage:

1. Select Navigate as the type.
2. Type the Name of the action button.
   
3. Open the Target Location drop-down menu.
   
4. Select the target location.
   
5. Type in the destination URL under Actions (to use double quotation marks on both ends of the URL).                                    
   
6. Click Save.
   
7. Click the gear icon to get out of edit mode.
   
8. The example calls the Indianapolis weather:
   
1. http://weather.com
   

1. Click on the Link icon to navigate to the webpage.
   
2. MFGx/Fuuz Chrome Browser Extension and Action Buttons
   

Action Button Type: Screen

To create a floating screen:

1. Select Screen as the type.
   
2. Open the Fuuz drop-down menu.
   
3. Select the screen from the drop-down menu. 
   
4. Type in the Name of the action button.
   
5. Click on the blue + icon (bottom) to add parameters.
   
6. Click Save.
   
7. Click the gear icon to get out of edit mode.
   

This example calls the WorkOrderDetail Form screen.

1. Select Run on page load.
   
1. Every time the Work Order Completion Form opens, the WorkOrderDetail Form screen opens.
   
2. This example shows how to pass in an ID parameter.
   
3. Select the type as Querystring.
   
4. Select the value as ID.
   
1. This is the ID in the URL
   
2. This is the unique identifier from the page 
   

Click the Document icon to call the action button (it will be called automatically the next time the page is loaded).

1. The form created in Fuuz is pulled up.
   
2. It is possible to:
   
1. Enter additional details
   
2. Move this screen around
   
3. Change the screen’s size
   
4. Minimize the screen
   
5. Close the screen
   
3. When navigating to a different work order completion form, a screen for that work order ID opens.
   

Action Button Type: Data Flow

This example calls a Data Flow:

1. Select Data Flow as the type.
   
2. Open the Fuuz drop-down menu.
   
3. Select the screen from the drop-down menu. 
   
4. Type in the Name of the action button.
   
5. Open the Target Location drop-down menu.
   
6. Select the target location from the drop-down menu.
   
7. Click on the blue + icon (bottom) to add parameters.
   
8. Click Save.
   
9. Click the gear icon to get out of edit mode.
   

This example calls a Data Flow to receive the completed quantity and multiply it by 10.

1. Select JSON as the Response Type.
   
2. Open the Value drop-down menu.
   
3. Choose Quantity for the Parameters.
   
4. Choose Hidden Input for the Type.
   
5. Open the Value drop-down menu.
   
6. Choose Quantity from the drop-down menu.
   
7. Add a static input for the currency.
   
8. Click the Flow icon to call the action button.
   

The result is displayed at the bottom of the menu.

(300 x 10 = $3000)

Other options can be combined when creating the different action buttons, for example:

Select the Floating option to put a floating window on the screen.

This produces a floating button to activate the flow, not an actual screen. 

Select the Disableable option to run a JSON transform at the start of the page loading.

If it returns true, it will disable the button.

In the example, it will disable the button if id = 6094

Select the Prevent Closing option, the floating button will not have the Close option.

Disabled action button (id=6094)

Abled action button (id<>6094)  

After clicking on the floating button, the result displays on the same floating screen.

Action Button Type: Visualization

This example calls a Visualization:

1. Select Visualization as the type.
   
2. Open the Fuuz drop-down menu.
   
3. Select the visualization from the drop-down menu. 
   
4. Type in the Name of the action button.
   
5. If applicable, enter an Auto-refresh interval (seconds).
   
6. Click on the blue + icon (bottom) to add parameters.
   
7. Click Save.
   
8. Click the gear icon to get out of edit mode.
   

This example calls a Random pie, this visualization is set to create a new random pie when executed.

Visualizations load in a floating window. In this example, the Run on page load option is selected.

The Auto-refresh interval is set to 2 seconds.

On page load, a floating window opens, showing the pie chart, this pie chart refreshes every 2 seconds.

It is also possible to click on the refresh icon (top, left).

This visualization is fully interactive just like it is in Fuuz. 

This window can be expanded, moved, minimized, and closed.

Action Button Type: CSS

This example calls CSS.

To call CSS

1. Select CSS as the Type (this injects a style sheet to the entire page).
   
2. Type in the Name of the action button.
   
3. Enter the desired changes under Actions.
   

In this example, we are going to hide a field on page load, Memo (to find the information about the fields, clock F12).

We will set up the Visibility to Hidden.

Click the Document icon to call the action button (it will be called automatically the next time the page is loaded).

This is what displays before executing the action button.

This is what displays after executing the action button (Memo is hidden).