Picture of Infigo Iframe Integration Overview and Setup

Infigo Iframe Integration Overview and Setup

The Infigo iframe integration allows you to embed the Infigo Design Tool (Editor) directly into your application, enabling customers to design products seamlessly within your platform. This integration provides a comprehensive solution by offering the entire Infigo workflow, from creating output/artworks to pushing data into MIS systems and supporting approval processes.

Resources and Key Links

  1. Demo Application

    • URL: demo-iframe-api.private.infigosoftware.rocks

    • GitHub Source Code: iframe-demo-app

    • Description: This application demonstrates a real iframe integration of the Infigo Design Tool (Editor) for investigation and debugging purposes. It is recommended to use this demo as a reference, and for production implementations, manage all API interactions via backend calls to maintain security.

  2. Infigo Documentation API

    • URL: api.public.infigosoftware.rocks

    • Description: Comprehensive documentation covering all available endpoints utilized by the demo application. This API provides the necessary endpoints to enable the full Infigo workflow, including creating product outputs, interfacing with MIS systems, and integrating approval functionalities.

  3. Iframe Integration Documentation

    • URL: wiki-iframe.private.infigosoftware.rocks

    • Description: Detailed documentation on iframe configuration, available settings, and customizations. This wiki serves as a guide for setting up and troubleshooting iframe integration, allowing you to customize the Infigo Editor to fit seamlessly within your application.

Important Information

To navigate the Safari (and potentially other browsers in the future) third-party cookie security policy, it's crucial to set up a subdomain binding and SSL certificate on your Infigo storefront. This subdomain must match the domain of the requesting site. Failure to configure this beforehand will lead to integration issues.

When embedding our editor in your third-party software, since we use an iframe approach, it’s essential that the domain of the Infigo website hosting your editor and products matches your third-party site domain.

Example:

  • Your software domain – www.mywebsite.com

  • Infigo editor domain – personalise.mywebsite.com

Additional Notes:

  • API Security: To protect sensitive data, all API calls should be managed on the server side. Avoid making API requests directly from the client side to prevent exposing the API endpoints and authentication tokens.

  • Integration Flow: Use the demo application and documentation as a reference to develop a secure backend handling mechanism for iframe-related API calls in production environments. With this setup, your application can provide customers a powerful design tool and seamless access to the complete Infigo workflow.

Incomplete
Establishing a connection with our API

Overview

Firstly, you need to raise a ticket with our Support Desk here. Simply request for a new API token to be created on a specific storefront of yours and we will then provide this for you.

Our API uses basic authentication, so when using Postman to test the API you can take the API Token and add it to the Authorization tab, with Type set to Basic Auth. Then paste the API Token into the Username field.

Authorization Tab

To test this out, download the attached Postman Collection which includes our Authentication check API Request.

The response contains details about the storefront and provides confirmation that the API connection is good.

Authentication Check Endpoint

To authenticate API communication and validate credentials, you can utilize the endpoint provided by Infigo.

The Authentication Check Endpoint offered by Infigo serves this purpose, ensuring that the connection is established successfully.

Available Endpoints

Infigo provides a comprehensive set of endpoints to facilitate seamless integration with its platform. These endpoints allow you to load editors, manage customers, place orders, and generate outputs—all designed to enhance the customization and order flow in your applications.

  • Editor Endpoints: Integrate Infigo’s design editors dynamically within your application. Use these endpoints to capture personalization data, generate artwork, and finalize orders, providing a smooth customization experience for your customers.

  • Customer Endpoints: Manage and retrieve customer data efficiently. These endpoints let you create new customer records or access existing customer information, enabling a personalized shopping experience.

  • Order Endpoints: Simplify order management with endpoints designed to place, record, and retrieve order details, supporting your end-to-end order workflow.

  • Output Endpoints: Generate and access outputs based on orders and editor interactions. Whether you need downloadable files or print-ready artwork, these endpoints ensure you can deliver the right products to your customers.

You can check all of them in the usages of iframe-demo-app API services.

OpenAPI Integration

Take advantage of our OpenAPI specification for seamless integration:

  • Download OpenAPI: Import the Infigo OpenAPI directly into Postman, creating collections for all endpoints, streamlining your integration process. OpenAPI

Feel free to explore our API documentation for more detailed information on each endpoint and how to integrate with our platform effectively.

Flow Overview
Iframe.drawio_v1.png

Step-by-Step Guide

1. Is the User Authenticated?

  • Authenticate User: Check if the user is authenticated on your platform.

  • If the user is authenticated, all associated jobs (or designed items) must be owned by the same Infigo Customer ID. This Customer ID should uniquely identify each e-commerce customer, enabling consistent job and order management.

    • you can use Migrate User to migrate jobs from a guest user to a registered user.

2. Linking E-Commerce Users with Infigo Customers

In Infigo, each customer placing an order should be linked to a user in your system. Here’s how this linking functions in different scenarios:

  • Registered Customer Role: The e-commerce customer must have a registered role in Infigo, as only registered customers—not guests—can place orders.

  • Single-Customer Constraint for Orders: An order in Infigo can only contain jobs associated with a single customer. Therefore, if your platform allows customers to design multiple products/jobs, all jobs within a single order must belong to the same customer ID in Infigo.

3. Handling User Sessions and Maintaining Customer References

To ensure consistency between your system and Infigo:

  • Keep a reference in your system for both the logged-in customer and the corresponding Infigo Customer ID. This helps manage orders seamlessly across customer sessions.

  • Alternatively, rely on the customer linked with the first job created in Infigo for the session, ensuring all subsequent jobs in the basket are associated with the same customer.

4. Guest and Logged-In User Flows

Managing session transitions from guest to authenticated user requires special consideration:

  • Guest Flow: When a guest user designs a product and adds it to the basket, they’re assigned a temporary customer ID.

  • Login and Cart Migration:

    • If the guest logs in, the platform should migrate their cart items to the authenticated session.

    • After login, all jobs added should reflect the authenticated user’s Customer ID in Infigo to maintain order compatibility.

This flow avoids scenarios where the basket contains jobs linked to different customers, which could prevent order placement.

5. Opening the Editor and Adding Products to the Basket

  • Open the Infigo editor in an iframe, allowing users to design their products directly on your platform.

  • Each product/job should be linked to the user’s session to ensure consistency in the customer reference.

6. Order Placement

Once all designs are finalized, the user can place an order. Ensure:

  • All jobs in the basket are linked to the same Infigo Customer ID to allow for successful order processing. - Example of migrate customer

  • The platform’s session management confirms that the correct user information is passed to Infigo for order placement and tracking.

Embedding Our Editors in Another Site

Embedding our editors into your existing site or another site is relatively straightforward. This article attempts to provide you with all the tools and understanding you will need to successfully mimic the process.

Supported Editors: MegaEdit, Infigo Editor

Firstly, we recommend viewing the attached resources (see below) as they provide additional information on how the process works along with tools to get set up quickly and start testing.

The first step with all API communication is to obtain your API Token from the Support Team.

Now that you have this, we can look at the specifics required to load an editor, capture personalization, and then create the artwork or place an order.

Infigo API Chart

The User Journey Is:

For reference, check Infigo Demo Application and GitHub Repository.

Infigo Setup

You need to ensure Infigo is configured to allow you to utilize the external iframe from a security perspective.

General Settings

  • Configure the Cookie Same Site mode to use the None value.

  • Iframe Protection: External Editor.

Infigo Settings

  • External Source Origin For Post Messages. - add the domain/origin of your site.