> For the complete documentation index, see [llms.txt](https://docs.integry.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.integry.ai/embedded-ui/render-modes-layouts-and-styling.md).

# Render modes, layouts and styling

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`

<figure><img src="/files/b2GYn5FyPLTYO3oBACjp" alt="" width="375"><figcaption></figcaption></figure>

```javascript
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`

<figure><img src="/files/gFfL7I8RErWAbsHgkYC3" alt="" width="375"><figcaption></figcaption></figure>

```javascript
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`

<figure><img src="/files/EzRZ1qcMdDw6wx7l8kYY" alt=""><figcaption></figcaption></figure>

```javascript
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 <a href="#h_01j9q2xqdfnmk2py1h9x6stwqf" id="h_01j9q2xqdfnmk2py1h9x6stwqf"></a>

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

```javascript
#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 <a href="#h_01j9q2j9hsh2v9zhxffty75bsf" id="h_01j9q2j9hsh2v9zhxffty75bsf"></a>

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.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.integry.ai/embedded-ui/render-modes-layouts-and-styling.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.