LogoLogo
ProductsPricingGlossary Launch Acho
  • 🎉Welcome
  • Introduction
  • What is Acho?
  • How does Acho work?
    • Proof of Concept (PoC)
  • App Builder
    • Get Started
    • Core Concepts
    • Overview
    • App construction
      • App Configuration
      • Pages
      • Interactions
        • Add an interaction
        • Add conditions to interactions
        • Event payload
        • Ordering interactions with action flow
        • Transformer
        • Actions
          • Navigation
          • Element
          • Data Source
          • App
          • Page
          • API Service
          • Database
          • Media Service
      • Table
      • Metric
      • Query
      • Data Store
      • Elements
        • Table & Chart
          • Searchable Table
          • Table
          • Chart
          • Score Card
        • Form Elements
          • Form
          • Search Bar
          • Checkbox
          • Date Picker
          • Custom Form
          • Input
          • Multiselect
          • Radio Button
          • Radio List
          • Rich Text Editor
          • Select
          • Switch
          • Textarea
          • Upload
        • Web Elements
          • Badge
          • Button
          • Clickable
          • Collapse Menu
          • Divider
          • Icon
          • Image
          • Link
          • Message
          • Modal
          • Notification
          • Pagination
          • Popover
          • Rate
          • Rich Text
          • Tabs
          • Text
        • Layout Elements
          • Container
          • List
        • Advanced elements
          • Code Block
          • Condition
          • Print
        • CSS Styles
          • General techniques
          • Layout
          • Spacing
          • Size
          • Position
          • Typography
          • Background
          • Border
          • Effect
        • Form Check
        • Tooltip
      • Accessors
      • Plugin Store
    • Popular Use Cases
      • Build a chart from Table Nodes
      • Create a table
      • Create a list
      • Create a filter
      • Create a search bar
      • Use Custom Form Container to collect user inputs
      • Drill down on a table
      • Download file from query node
      • Set loading animations
      • Modify a database
      • Navigate to a different page
      • Set up dynamic routing
      • Update app data using accessors
      • Create a Chart with Code Block and D3 Library
      • Rich text and rich text editor
      • Send an Email via Mailjet Plugin
    • Preview
    • Publish
      • Embed published app on website
    • Version Control
    • App User Management
      • Onboarding Page
      • Sign in page
      • Guest Isolation and Private Session
    • Theme
    • FAQ
  • Acho Studio
    • Quick Start
    • Resources
      • Add a resource
      • Supported data sources
        • Airtable
        • Amazon Ads
        • Amplitude
        • Amazon Seller Partner
        • Apify Dataset
        • Appstore
        • Asana
        • API Connector
        • API Template
        • AWS CloudTrail
        • Azure Table Storage
        • Batch Files
        • Bamboo HR
        • BigCommerce
        • BigQuery
        • Bing Ads
        • Braintree
        • Cart.com
        • Chargebee
        • Chargify
        • Chartmogul
        • Clickhouse
        • Close.com
        • CockroachDB
        • Confluence
        • Customer.io
        • Delighted
        • Dixa
        • Drift
        • Facebook Marketing
        • Freshdesk
        • Freshsales
        • Freshservice
        • GitHub
        • GitLab
        • Google Ads
        • Google Analytics
        • Google Sheets
        • Google Search Console
        • Greenhouse
        • Harness
        • Harvest
        • HubSpot
        • IBM Db2
        • Instagram
        • Intercom
        • Iterable
        • Jenkins
        • Jira
        • Kafka
        • Klaviyo
        • Kustomer
        • Lemlist
        • Lever Hiring
        • LinkedIn Ads
        • Linnworks
        • Mailchimp
        • Marketo
        • Microsoft Teams
        • Mixpanel
        • Monday
        • MongoDB
        • MySQL
        • My Hours
        • NetSuite
        • Notion
        • Okta
        • OneDrive
        • OneSignal
        • Oracle DB
        • Outreach
        • PagerDuty
        • Paypal Transaction
        • Paystack
        • Pipedrive
        • PersistIq
        • Pinterest
        • Plaid
        • PostgreSQL
        • PostHog
        • PrestaShop
        • Qualaroo
        • QuickBooks
        • Recharge
        • Recurly
        • Remote File
        • S3
        • Salesforce
        • Salesloft
        • SearchMetrics
        • Sendgrid
        • Sentry
        • Short.io
        • Shopify
        • Single File
        • Slack
        • Smartsheets
        • Snapchat Marketing
        • Snowflake
        • SQL Server
        • Square
        • Stripe
        • SurveyMonkey
        • Tempo
        • TikTok Marketing
        • Trello
        • Twilio
        • Typeform
        • VictorOps
        • WooCommerce
        • YouTube Analytics
        • Zendesk Chat
        • Zendesk Sunshine
        • Zendesk Talk
        • Zendesk Support
        • Zenloop
        • Zoho CRM
        • Zoom
        • Zuora
    • Data Prep (Projects)
      • Create a Data Prep Project
        • Create a table tab
        • Copy a table tab
        • Hide a table tab
      • Apply an action
        • View
          • Hide Columns
          • Filter
          • Sort
          • Cut
          • Rename
          • Move Column
        • Combine Tables
          • Join
          • Union
        • Transformation
          • Pivot Table
          • Unpivot
        • Data Cleaning
          • Cleanse
          • Replace
          • Change Type
          • Deduplicate
          • Split
          • Flatten
        • Tools
          • Formula
          • SQL Editor
            • SQL Editor Queries
            • All functions in Formula/SQL
              • Mathematical Functions
              • String Functions
              • Date Functions
              • Datetime Functions
              • Time Functions
              • Timestamp Functions
              • Conditional Functions
              • Type Conversion
              • Other Functions
        • Reserved Keywords
      • Pipeline
      • Edit your pipelines
      • Generate column summary for inspection
      • Use URL to access and share your project
      • Write a description for your project
      • Delete a resources/project/tab
    • Data Flow
      • Export data
        • Download CSV files
        • Excel Connector
        • Google Sheets Connector
        • Embed a table on your website
          • Data Usage Agreement
        • Apache Superset
        • Chartio
        • Looker
        • Metabase
        • Power BI
        • Qlik
        • Tableau
        • MongoDB
        • MySQL
        • MSSQL
        • Snowflake
        • PostgreSQL
        • BigQuery
    • Set up Data Sync
    • FAQ
  • Organization
    • Get started
    • Create an organization
    • Invite people to your organization
    • Share your resources
    • Share your projects
    • Share your apps
    • Change payment method on file
  • FAQ
    • I can't find data after uploading a big CSV file
Powered by GitBook
On this page
  • Steps to embed published app on website
  • Embedding Apps Across Different Browser/Web Environments and Mobile Devices

Was this helpful?

  1. App Builder
  2. Publish

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}}

You can also link to a specific page within the app by adding a page suffix to the URL. For example: https://publish.acho.io/{{app-id}}/{{page-suffix}}

In this structure:

  • {{app-id}} represents the unique identifier of your app.

  • {{page-suffix}} 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

  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.

PreviousPublishNextVersion Control

Last updated 5 months ago

Was this helpful?