# 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 [](https://docs.acho.io/app-builder/publish "mention")), and `<iframe>` element to embed the app.

A valid published app url has a format like <mark style="color:blue;">`https://publish.acho.io/{{app-id}}`</mark>&#x20;

You can also link to a specific page within the app by adding a page suffix to the URL. For example:\ <mark style="color:blue;">`https://publish.acho.io/{{app-id}}/{{page-suffix}}`</mark>

In this structure:

* <mark style="color:blue;">`{{app-id}}`</mark> represents the unique identifier of your app.
* <mark style="color:blue;">`{{page-suffix}}`</mark> is an optional path that points to a specific page within the app.

## 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&#x20;
3. In the pop-out new tab,  copy the url of your published app like <mark style="color:blue;">`https://publish.acho.io/app-id`</mark>
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:<br>

   ```
    <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>`**&#x65;lement 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.:

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F8MIUlvJyCTpEaMaMOrHc%2Fimage.png?alt=media&#x26;token=9a7bccab-4e98-41b6-9207-4ca223beb0b4" alt=""><figcaption></figcaption></figure>

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.&#x20;

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.&#x20;