Fusiform Orders Plugin

Importing the plugin

The Fusiform plugin can be imported from the FactoryFour static CDN, (https://static.factoryfour.com). There are two options for importing the plugin: directly import as a script or asynchonously append to the DOM using a script.

As a Script

<script src="https://plugin.factoryfour.com/factoryfour-orders-plugin.min.js"></script>

Asynchronously

(function(w, d, f) {
    function l() {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = f;
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    if (w.attachEvent) {
        w.attachEvent('onload', l);
    } else {
        w.addEventListener('load', l, false);
    }
})(window, document, 'https://plugin.factoryfour.com/factoryfour-orders-plugin.min.js');

Plugin Settings

The plugin is configured with the following required fields.

Required Fields

At a minimum the plugin must be configured with an organizationId (your vendor organization ID) and app (which will be set to fusiform or factoryfour)

Devices

By default, the plugin will display all available devices with the target organization. If only a subset of devices is desired in the plugin, include an array of the desired device ids in the configuration object as shown below. If only one device is provided, the plugin will immediately open to the user signup page.

window.castSettings = {
	organizationId: '{Vendor Organization ID}',
	app: 'fusiform',
	devices: ['v2-d47c89a8-73e9-4f7c-9a4f-679d2862ed22'], // optional
};

User Profile

To save users the step of signing up with their name and email, the current user profile can be passed to the plugin directly. The signup page will be skipped, and that user information will be passed through when the order is submitted. The required fields are firstName, lastName, and email. If any one of these fields is missing, the user will have to enter in their information manually.

window.castSettings = {
	organizationId: '{Vendor Organization ID}',
	app: 'fusiform',
	userProfile: {
		firstName: 'John',
		lastName: 'Doe',
		email: 'john.doe@email.com',
	}
};

Form Metadata

Customers may have metadata that needs to be passed into their forms in order to provide specific functionality unique to their forms. Your customer service rep will work with you to provide the specific details on how this metadata needs to be structured for your specific implementation

window.castSettings = {
	organizationId: '{Vendor Organization ID}',
	app: 'fusiform',
	metadata: {
		additionalInfo: 'here',
	}
};

Opening the plugin

The imported script creates a global function on the window window.openPlugin. This function takes a single variable which is the configuration object described above. All it takes is running this method to open the plugin. This can be done in any number of ways. The method we recommend is to add an event listener to the window that listens for clicks on specific UI elements.

											
window.castSettings = {
	organizationId: '591de7f5a55e08e637a74686',
	app: 'fusiform',
	devices: ['v2-d47c89a8-73e9-4f7c-9a4f-679d2862ed22'],
};
window.addEventListener('click', (event) => {
	if (event.srcElement.className === 'cast_button') {
		// Open the plugin based on the config
		window.openPlugin(window.castSettings);
	}
});
											
										

Debug Mode

During development, validation can be turned off by setting debugMode to true. This turns off validation for the user data entry views and the form views to quickly test order submission. WARNING: make sure to not include or set debug mode to false before deploying.

window.castSettings = {
	organizationId: '59aeb7eb9c8a546c4b5ca570',
	app: 'fusiform',
	devices: ['v2-d47c89a8-73e9-4f7c-9a4f-679d2862ed22'],
	debugMode: true,
};

Examples

<!-- Button Element -->

<button class="cast_button">
  Click to Activate
</button> 

<!-- Anchor Element -->

<a class="cast_button">
  Click to Activate
</a>