Integry Docs
  • Welcome
  • Sign up for a free trial
  • Apps
    • Overview
    • Authentication
      • Access Control and Testing
    • Passthrough Requests
    • Supported Apps
      • Accelo
      • Aircall
      • Constant Contact
      • Copper
      • Elastic Email
      • Fireflies
      • Insightly
      • Instantly
      • Ontraport
      • RingCentral
      • Sendy
      • ServiceTitan
      • ActiveCampaign
      • Jotform
      • ActiveTrail
      • Agile CRM
      • Aha!
      • Airtable
      • Amazon SES
      • Asana
      • Basecamp3
      • BirdSend
      • Breezy HR
      • Brevo
      • Campaign Monitor
      • Capsule CRM
      • Chargify
      • CleverReach
      • ClickUp
      • ClickSend
      • Cliengo
      • Coda
      • Constant Contact
      • ConvertKit
      • Copper
      • Customer.io
      • Delighted
      • Demio
      • Drip
      • E-goi
      • Eventbrite
      • EverAction
      • Everhour
      • Formstack
      • Freshdesk
      • Freshworks CRM
      • Mautic
      • Customer.guru
      • Front
      • FTP
      • GetResponse
      • GitHub
      • Google Contacts
      • Google Sheets
      • GoToTraining
      • Groove
      • Help Scout
      • HubSpot
      • Keap
      • Mailchimp Transactional
      • Mailjet
      • MailUp
      • MeisterTask
      • Monday.com
      • MoonMail
      • Moosend
      • Nimble
      • Notion
      • Ontraport
      • PagerDuty
      • Pipedrive
      • Pipeline
      • Salesforce
      • SendPulse
      • Slack
      • Snappy
      • SolarWinds
      • Stripe
      • SurveySparrow
      • Teamgate
      • Unbounce
      • Zoho Books
      • Zoho Campaigns
      • Zoho CRM
      • Zoho Mail
      • Zoom
  • Flows
    • Overview
    • Flow Tutorials
      • Sync data TO another app from your app
      • Sync data FROM another app to your app
      • Create a two-way flow
    • Build a Flow
    • Trigger a Flow
      • Multiple Triggers in a Flow
    • Steps in a Flow
    • Integrations
      • Runs
  • Functions
    • Overview
    • Try Functions in 60 seconds
    • Quickstart for AI
    • Viewing Function Calls
    • Source Functions
    • Agent Frameworks
      • LangChain/LangGraph
      • CrewAI
      • AutoGen
      • LlamaIndex
      • Haystack
      • Smolagent
      • LiteLLM
      • Mistral AI
  • Embedded UI
    • Embed Integry Apps Marketplace
    • Add Integry Apps to an Existing Marketplace
    • Render modes, layouts and styling
    • Embedding FAQs
  • APIs and SDKs
    • JS SDK Reference
      • React Web Apps
    • API Reference
  • Workspaces
    • Overview
    • Workspace Variables
    • User Variables
  • Users
    • Testing with Beta Users
Powered by GitBook
On this page
  • renderMode=IntegryJS.RenderModes.INLINE
  • renderMode=IntegryJS.RenderModes.MODAL
  • layout=IntegryJS.Layouts.NARROW
  • Using custom fonts
  • Customizing CSS

Was this helpful?

Export as PDF
  1. Embedded UI

Render modes, layouts and styling

PreviousAdd Integry Apps to an Existing MarketplaceNextEmbedding FAQs

Last updated 5 months ago

Was this helpful?

The embedded UI can be shown in an in-line container, or popped out in a modal. In addition, it can be shown in a wide or narrow layout.

renderMode=IntegryJS.RenderModes.INLINE

integry.showApps(
  IntegryJS.RenderModes.INLINE,
  "marketplace-container"
).then(() => {
  console.log("Marketplace rendered in-line.");
}).catch((error) => {
  console.error("Error rendering filtered marketplace:", error);
});

renderMode=IntegryJS.RenderModes.MODAL

integry.showApps(
  IntegryJS.RenderModes.MODAL
).then(() => {
  console.log("Marketplace rendered in-line.");
}).catch((error) => {
  console.error("Error rendering filtered marketplace:", error);
});

layout=IntegryJS.Layouts.NARROW

integry.showApps(
  IntegryJS.RenderModes.MODAL,
  "",
  IntegryJS.Layouts.NARROW
).then(() => {
  console.log("Marketplace rendered in-line.");
}).catch((error) => {
  console.error("Error rendering filtered marketplace:", error);
});

The SDK comes with some default styles which can be overridden on demand to customize different parts of the UI.

We use BEM naming to style internal components and scope the default CSS to the container used to instantiate that template via a dynamically generated class. This allows independent styling of different integration views using their respective container IDs.

Using custom fonts

The views respect the font-family attribute and the font stack is set to the following generic one by default:

#x-integry-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

To update the font, override the font-family attribute.

Customizing CSS

You can use this approach to override individual items with higher specificity. By specifying the ID of the container used to configure the SDK along with a custom class name, styles can be overridden for containers, controls and components.

#my-integry-container .an_available_class {
  /* This will override styles */
}