iFrame App

Embed any site into your Deskpro instance with an iFrame.

Deskpro Apps Documentation   •   iFrame App Setup Guide

---

About the App

The iFrame app enhances your Deskpro experience by allowing you to embed any website directly into your helpdesk. With this app, agents can seamlessly access external tools, dashboards, or resources without leaving Deskpro, streamlining workflows and improving productivity.

Setting up the app in Deskpro

You can follow our setup guide for a step-by-step guide to setting up the iFrame app in Deskpro.

Development

With DevContainers (Recommended)

To make development easier and avoid version conflicts, we recommend using DevContainers for local development. This approach ensures that everyone on the team uses the same environment, reducing setup issues and version mismatches between dependencies.

Why use DevContainers?

• Consistency: All developers work in the same environment, with the same versions of dependencies, tools, and configurations.
• Speed: The DevContainer setup is quick to start, letting you focus on coding rather than environment setup.
• Isolation: Avoid conflicts between different versions of Node.js, PNPM, or other dependencies by using the predefined container setup.

Getting Started with DevContainers

1. Ensure that you have Docker and VS Code installed.
2. Open the project in VS Code.
3. If you have the Remote - Containers extension installed, VS Code should automatically detect the .devcontainer configuration in this project and prompt you to reopen the folder in the container.
4. After opening the project in the DevContainer, run:

   pnpm start

You should now be able to view the app in your browser. For more information about developing Deskpro apps, Visit the docs.

Natively

We recommend using the DevContainer mentioned above for Consistency, Speed and Isolation.

This app was developed primarily using TypeScript, React, and Vite.

Setup

To run this project locally:

# Clone the repository
git clone https://github.com/DeskproApps/iframe.git

# Change to the project directory
cd iframe

# Install dependencies
pnpm install

# Run the development server
pnpm start

You should now be able to view the app in your browser. For more information about developing Deskpro Apps, Visit the Docs.

Testing

We've included jest to run tests. It will look anywhere in /src for test suite files ending in .test.tsx or .test.ts.

You can run all tests using:

pnpm test

Versioning

Every app deployment requires that the version property in the manifest.json file be updated to reflect the new app version. This is so Deskpro can detect changes and add/upgrade apps accordingly. As such, we've made altering versions easy by having CI make the actual version change for you. Here's what we do:

• We increment patch versions, i.e. 1.0.1, automatically. This is the default
• Minor versions, i.e. 1.1.0, are incremented if you add the minor-version GitHub label to your PR
• Major versions, i.e. 2.0.0, are incremented if you add the major-version GitHub label to your PR

Top Contributors

License

Distributed under the MIT License. See LICENSE.md for more information.