Embed published app on website

Acho allows you to embed your published app in a pretty and interactive window on your website. All you need is the published app url (See how to publish app at Publish), and <iframe> element to embed the app.

A valid published app url has a format like https://publish.acho.io/app-id Additionally, you can specify a specific page by appending a page suffix to the URL: https://publish.acho.io/app-id/page-suffix

Steps to embed published app on website

1. Go to the app you want to embed.

2. Click Publish -> Go to published app at the upper-right corner

3. In the pop-out new tab, copy the url of your published app like https://publish.acho.io/app-id

4. Now that you have obtained the URL of your published app, you can proceed to embed it on your website using an element. Here's an example of how to use the element to embed the app:

    <div style="width: 100%; height: 500px; padding: 0; overflow: hidden">
       <iframe
         src="https://publish.acho.io/6ec12483-8a70-4cf4-bf00-3e56270489ce"
         style="
           width: 200%;
           height: 1000px;
           border: 0;
           -ms-transform: scale(0.5);
           -moz-transform: scale(0.5);
           -o-transform: scale(0.5);
           -webkit-transform: scale(0.5);
           transform: scale(0.5);
           -ms-transform-origin: 0 0;
           -moz-transform-origin: 0 0;
           -o-transform-origin: 0 0;
           -webkit-transform-origin: 0 0;
           transform-origin: 0 0;
         "
       ></iframe>
     </div>

   Replace https://publish.acho.io/app-id in the src attribute of the <iframe>element with the URL you copied from the published app.

A successful embedded app looks like the image below, having full functionality within the original app.:

By following these steps and embedding the code snippet in your website, you can integrate the Acho app into your website and provide service to your visitors.

Embedding Apps Across Different Browser/Web Environments and Mobile Devices

When embedding apps via iframe across different browser/web environments and mobile devices, it is important to consider the responsive behavior of the embedded app. By adjusting the iframe's size based on the device viewport, such as width, you can determine whether the app should be displayed in a mobile or desktop view.

For instance, when creating websites for mobile devices, users should set the iframe size to fit the mobile screen size. This way, when users access the website on their mobile devices, they will see the embedded app in a mobile-friendly format.