Hubfolio Project Integration Guide

In Hubfolio, users have the option to present their projects in two formats: a Web Link or a PDF file. For PDF files, users simply need to upload the relevant file in the frame options section of their project. If the user prefers to display their project as a Web Link, the following instructions must be followed to ensure proper integration.

Embedding Settings: X-Frame-Options and CORS Configuration

To display your project on Hubfolio in an iframe, you must allow the https://hubfol.io origin to view your project's domain. Please refer to the following resources for detailed instructions on enabling the necessary settings:

1. X-Frame-Options (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)

2. Content-Security-Policy: frame-ancestors (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)

3. Access-Control-Allow-Origin (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)

Overview

This JavaScript library is designed to facilitate seamless communication between Hubfolio and user projects embedded within iframes. It enables data transfers, such as performance metrics, and supports user-specific features such as browser navigation between the embedded project and the Hubfolio website.

Usage

To enable communication between your project and Hubfolio, add the following script to the section of your HTML document:

<script  src="https://cdn.jsdelivr.net/npm/hubfolio-user-project-communication@latest/index.js"></script>

Once this script is included and the CORS settings are properly configured as outlined above, your project should be fully functional on the Hubfolio platform.