Formify SDK

The SDK is a tool that enables the embedding of a 3D cabinet configurator with interactive features. It allows users to customize and view a cabinet in 3D with real-time updates, providing a highly engaging and interactive experience. With the SDK, you can quickly and easily add a cabinet configurator to your website, providing your users with a compelling 3D configurator. This documentation provides detailed instructions, code examples, and best practices to help you integrate the SDK into your website.

Installation

To install the "formify-sdk" package, run the following command in your terminal:

npm install formify-sdk

This will download and install the package and its dependencies into your project's node_modules folder.

Example usage

Here's an example usage of the SDK and how to use its createEditor function:

import { createEditor } from 'formify-sdk';

// Call the createEditor function and assign it to the 'editor' variable
const editor = createEditor('YOUR_COMPANY_ID');

// Add event listeners using the 'on' method on the editor instance
editor.on('projectSaved', (data) => {
  // TODO: Add functionality to be executed when the 'projectSaved' event is triggered
  editor.dispose();
});

In the example above, we first call the createEditor function. This function creates a new instance of the editor and returns it. We then assign the returned instance to a variable called editor.

Next, we add an event listener to the editor instance using the on method. The on method takes two parameters: the name of the event to listen for (in this case, 'projectSaved') and the function to be executed when the event is triggered. In the example above, we provide an anonymous function with calls the editor.dispose() method.

The dispose() method is used to destroy the editor instance and free up any resources it may be holding onto. This is important to do when you're done using the editor, as it helps to prevent memory leaks and improve performance.

Overall, this example demonstrates how to create an editor instance using the SDK and how to add an event listener to it using the on method. The projectSaved event is just one example of the many events that can be triggered by the editor, and you can customize the functionality that gets executed in the event listener to suit your needs.

API

createEditor function

The createEditor method is used to create a new instance of the 3D cabinet configurator editor. It takes one optional configuration object parameter and returns an editor object.

The configuration object can have three optional properties: width, height, and element. The width and height properties are strings that specify the size of the iframe element that will contain the editor. The element property is an HTMLElement that specifies the container element that the editor will be appended to.

Here's an example of how to use the createEditor method:

import { createEditor } from 'formify-sdk';

// Create a new editor with a custom width and height
const editor = createEditor('YOUR_COMPANY_ID', {
  width: '800px',
  height: '600px',
  element: document.getElementById('editor-container'),
});

In the example above, we create a new editor instance using the createEditor method and pass in a configuration object with width and height properties set to '800px' and '600px', respectively, and an element property set to the container element obtained using document.getElementById().

FromifyWardrobeEditor methods

on method

The on method is used to add event handlers to the editor. It takes two parameters: the name of the event and the function that will be called when the event is emitted.

Example usage:

function handleProjectSaved(event) {
  console.log("Project saved!", event);
}

editor.on("projectSaved", handleProjectSaved);

off method

The off method is used to remove event listeners that were added with the on method. It takes the same parameters as on: the name of the event and the function that was passed to on.

Example usage:

editor.off("projectSaved", handleProjectSaved);

dispose method:

The dispose method is used to remove the editor and all of its event listeners. It takes no parameters.

Example usage:

editor.dispose();

Events

The SDK emits several events that can be listened to using the on method of the editor object. Here's an example of one of these events:

projectSaved

The projectSaved event is emitted when the user saves their project. The event object has the following properties:

• id (string): A unique identifier for the saved project, in the format of a UUID v4.
• gltfFile (string): The HTTP link to download the 3D object.
• shopUrl (string): The link to the online shop where the configured product can be purchased.
• images (string[]): An array of links to images of the configured product.

Example usage:

editor.on("projectSaved", function(event) {
  console.log("Project saved!", event.id);
  console.log("3D object:", event.gltfFile);
  console.log("Shop URL:", event.shopUrl);
  console.log("Images:", event.images);
});