How to Embed an Iframe Component into Your Momen Project?

Learn how to embed an iframe into your website.

Introduction

This document serves as a comprehensive guide for introducing and developing custom components, specifically focusing on creating an iframe-embedded component. For a live demonstration of what you'll be building, visit Momen Ai.

Prerequisites

Your project needs to be a web-based application utilizing ZVM for rendering. It should be structured as a React project leveraging Vite and its ecosystem. This setup allows developers the flexibility to craft new components tailored to their specific requirements. However, to ensure compatibility with Momen, adherence to particular standards is necessary.

1. It's imperative that your custom project is publicly available on GitHub under your developer account. Momen facilitates this process by offering a template project. You can initiate your development by forking this template from https://github.com/oychao/zvm-custom-comp-template. Please avoid directly cloning the template to ensure your project remains unique.

Configuration Steps

1. Fork and Clone: Begin by forking the project to your repository, then clone it locally with git clone https://github.com/%youraccount%/zvm-custom-comp-template.

1. Initialize the Project: To start, install dependencies with npm i to prevent errors, then launch the project using npm run dev. This step ensures the project's functionality locally before its integration into your Momen project.

1. Modify to Iframe Component: The starter project includes a basic counter component. You'll need to replace or supplement this with an iframe component by adding it under src/components/. This demonstrates the embedding of a custom webpage.

export function Iframe() {
  return <iframe 
  style={{ width: '100%', height: '100%', border: "0", borderRadius: "30px" }} 
  src="https://0gon984kvrrve.villa.momen.app/"></iframe>;
}

Or you can replace the original counter component by adding a new component.

1. Export Components: It's crucial to export your components through src/components/index.ts. This file serves as the main entry point for component exposure.

1. Configuration in config.json: This configuration file is vital for making your components recognizable in the Momen editor. It involves detailing each component's settings, such as names, preview paths, and descriptions, while adhering to npm versioning standards for updates.

1. Local Debugging with App.tsx: Use this for component testing, which is essential for refining your components without impacting the Zion/Momen project runtime.

2. Commit to GitHub: After development, push your changes to the GitHub repository, targeting the main branch (master/main).

3. Momen Configuration: Link your repository in Momen by configuring the display name and address of your repository. This integration step is crucial for importing your custom components into the Momen platform.

1. Publication and Version Management: Momen facilitates easy component updates and version management, ensuring your project remains current within the Momen ecosystem.

1. When releasing a new version, you can modify the components in your repository by adding, updating, or deleting them. Update the component information and version name in src/components/index.ts and config.json, then click the "+" sign in the left list of the repository.

1. Next, navigate to project configuration and click on the GitHub icon located in the upper right corner of the left panel. Then, select the version that was just released and the list of optional components will automatically include the newly released components.

1. Make sure to click "Preview" at this point to apply the custom component's configuration at runtime.

1. Then you can view your custom components in Mirror or Preview.

About Momen

Momen is a no-code web app builder that allows users to build fully customizable web apps, marketplaces, social networks, AI apps, enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions, getting your web app products to market faster than ever before.