Picture of Iframe | Design Job

Iframe | Design Job

For real-time reference and debugging, please check the GitHub implementation.

The API Request creates a link to embed the editor in an iframe. This link automatically authenticates the user and is only valid for a short period. It requires the Customer GUID and the Product ID.

You can specify several parameters in the request:

  • id: This is the Customer GUID.

  • productId OR SKU: This represents the Infigo Product ID or the product SKU.

  • errorUrl (optional): Redirects the user in case of authentication errors.

  • embeddedOperationMode: Set this to "true" when embedding MegaEdit; otherwise, you can omit this parameter.

The response will return a URL containing a temporary AutoLogin token, which should be inserted into your iframe's src.

To capture specific events that occur in the editor, you must include our JavaScript library on your iframe's parent page (see resources). This library allows you to capture events, such as the 'Add to basket' click event. When this event occurs, you need to capture the Job ID included in the event data, as it is required later in the order placement process to ensure the correct output is generated.

You can also extend the integration to allow for editing existing jobs (either from the basket or saved projects). To do this, pass the ID as the orderlineItemId parameter. If you need to support saved projects, you can capture and handle the 'Save project' event in the editor through the JavaScript communicator library, storing the ID and directing the customer to their account.

Sample request:

For more details on the required parameters and how to construct the request effectively, refer to the implementation in the getEditorLinkFor file on GitHub.

Important:
To achieve proper iframe integration, you will need to utilize the

Incomplete
XD

The Infigo Iframe Communicator facilitates communication between the iframe containing the editor and the parent page. This allows for seamless interaction and event handling between the editor and the hosting application.

Communicator

The Infigo Iframe Communicator facilitates communication between the iframe containing the editor and the parent page. This allows for seamless interaction and event handling between the editor and the hosting application.

Keyboard Interaction

For reference, check the code.

The provided code snippet includes functionality for handling keyboard events within an iframe, particularly for detecting the opening and closing of the virtual keyboard on mobile devices. Below is an analysis of the relevant code:

Passing Information to and from Infigo

With the help of the communicator, you can easily send various types of information between your system and Infigo. This functionality is especially useful for transferring product details, customer information, or any other data that needs processing. Infigo can read different data types via a MegaEdit editor script, allowing you to update and manipulate Editor, Product, or Job data.

To receive events from Infigo in your external system, ensure that you add your system's origin to the InfigoSettings under "External Source Origin For Post Messages." For guidance, refer to the setup example available at Infigo Design. Your system's origin must match what you have configured; otherwise, Infigo will not trust external messages due to security measures. Currently, each storefront can only have one origin configured.

For a practical example, check the product page. This page demonstrates how to retrieve attributes from Infigo and build an iframe form in the demo app. Customers can select values, and once the editor triggers the Editor loaded event, this information is passed to Infigo through the communicator.

You will also need to add a ME script to Infigo. This script will catch the event data and update attributes and Invent variables in Infigo if they match the names. Additionally, the script shows how to handle changes in Invent variables within Infigo, allowing you to send the updated values back to your system via the communicator.

This setup provides a flexible solution for passing pricing, attribute selections, and other information back and forth between your system, the ME editor, and Infigo.

Retrieve Design Job Data

Once the user finalizes the design for their job, you can capture all the data linked to this job via the iframe communicator event Infigo.ItemAddedToBasket. Below is an example of the data structure that will be received:

This data structure also includes thumbnails and previews of the job, which you can use to display the design created by the user.

You will need to store this data in your system and link it to a shopping cart item. When the order placement is finalized, you can pass this Job reference to Infigo to complete the order process.