Skip to main content
A new Mist app is standalone: a web app at its own address. An integration point connects it to a place in Fluid. Each one shows a page from your app at that place. One app can have several integration points. Each one can show a different route from the same app. To show your app in the portal your reps use, place an embed on a portal screen in the portal builder and point it at your app’s address. That’s set up in the portal, not on the Mist app.

​
Add an integration point

​
In the Mist desktop app

1

Open the dialog

Right-click the Mist app and click Add integration point….
2

Pick a kind

Pick Droplet, Drop Zone or Mobile.
3

Fill in the fields

Enter a Name, such as “Checkout compliance”. Under Path, enter the app route to show, such as embed/checkout-banner. Leave it empty to show the app’s home page.
  • For a drop zone, pick a Zone.
  • For a mobile embed, add a Cover image, best at a 3:1 ratio, about 1200x400. Height (px) defaults to 600.
4

Add and check

Click Add & check. Mist creates the integration point, then checks that the route responds. It reports Comb-over passed, Comb-over passed with warnings or Comb-over found blockers.
The app must be live first. While it’s still being set up, you see “This Mist has no public URL yet — it’s still provisioning.” You can’t change an integration point’s kind later. Delete it and add a new one instead.

​
With the CLI

Add an integration point to an existing app with fluid mist attach:
Or create the app and its first integration point in one step:
To link a droplet you already have instead of creating one, pass --existing <uuid> to attach, or --hostable droplet:<uuid> to create.

​
Droplet

A droplet puts your app inside the Fluid admin. Companies install it, and each installation gets its own credentials. See Droplets. When Mist creates the droplet for you, it:
  • Sets the droplet’s embed URL to your app’s address, plus the path you entered.
  • Points the droplet’s install and uninstall webhooks at /api/webhooks/installed and /api/webhooks/uninstalled.
  • Adds the droplet’s environment variables to the app, such as FLUID_DROPLET_UUID and FLUID_WEBHOOK_AUTH_TOKEN. See Hosting.
  • Redeploys the app, so the new variables take effect.
An app can have one droplet. How auth flows. When a company installs the droplet, Fluid sends droplet.installed, and the template stores that company’s droplet installation token. When someone opens the droplet in the admin, Fluid adds the installation reference, and can add a session token, to the URL. See Authentication. If you link a droplet you created yourself, point its lifecycle webhooks at your app. Run this once, with a company token and the droplet’s UUID:
fluid mist droplet repair also fixes a droplet’s embed and webhook URLs when they don’t match the app.

​
Reach systems that only accept Fluid’s IP addresses

Some systems, such as Exigo, only accept requests from known IP addresses. A droplet can ask to send its requests through Fluid’s egress proxy. Run fluid mist droplet egress-proxy on, or check the egress option in the dialog when your company has it. A Fluid admin approves the request. Once it’s approved, Fluid sets FLUID_EGRESS_PROXY_URL on the app.

​
Drop zone

A drop zone shows a route from your app in a zone of a Fluid page. In Mist, the zones are grouped by page: Checkout, Order Confirmation, Product Detail, Admin · Order Detail and Admin · Customer Detail. In the CLI, name the zone as page__zone, such as checkout__below_total. The template’s /embed/checkout-banner page is a working drop zone example. How auth flows. Each surface sends its own context, such as the current cart in checkout. Treat it as untrusted input and check it on your server. See Embed apps with drop zones. A drop zone can also be registered by your droplet when a company installs it. Declare it under dropzones in lib/config/droplet.config.ts. See Starter template.

​
Mobile embed

A mobile embed shows a route from your app inside the Fluid mobile app, with a cover image and a starting height. Design the page for a phone screen.

​
Frame the app inside Fluid

Fluid shows integration points in a frame. The template’s proxy.ts sets a Content-Security-Policy header with frame-ancestors that lets only fluid.app and its subdomains frame your pages. If a page that frames your app runs on another domain, such as your own storefront domain, add that domain to FLUID_FRAME_ANCESTORS in proxy.ts. To show a friendly “Open this in Fluid” message when someone opens a page directly, wrap the page in <EmbedGuard> from app/embed-guard.tsx.