Render modes and styling

You can configure the visual layout of the marketplace with ready-to-use render modes and styles. You can also further customize it with your own stylesheets.

Configure the layout

Using render modes and styles

The following variables can be passed in the init()function to configure how the marketplace is rendered:

  • renderMode

    • IntegryJS.RenderModes.INLINE

    • IntegryJS.RenderModes.MODAL

  • viewStyle

    • IntegryJS.ViewStyles.COMFORTABLE

      • Multiple columns, desktop view

    • IntegryJS.ViewStyles.COMPACT

      • Single column, mobile-friendly

  • showApps

    • true

      • Group flows by app

    • false

      • Show all flows separately

Possible layouts

Inline, Comfortable, showApps=true

integryHandler.init({
    containerId: "x-integry-container",
    showApps: true,    
    renderMode: IntegryJS.RenderModes.INLINE,
    viewStyle: IntegryJS.ViewStyles.COMFORTABLE,
});

Modal, Comfortable, showApps=true

integryHandler.init({
    containerId: "x-integry-container",
    showApps: true,    
    renderMode: IntegryJS.RenderModes.MODAL,
    viewStyle: IntegryJS.ViewStyles.COMFORTABLE,
});

Modal, Compact, showApps=true

integryHandler.init({
    containerId: "x-integry-container",
    showApps: true,    
    renderMode: IntegryJS.RenderModes.MODAL,
    viewStyle: IntegryJS.ViewStyles.COMPACT,
});

Modal, Compact, showApps=false

integryHandler.init({
    containerId: "x-integry-container",
    showApps: false,    
    renderMode: IntegryJS.RenderModes.MODAL,
    viewStyle: IntegryJS.ViewStyles.COMPACT,
});

Inline, Compact, showApps=false

integryHandler.init({
    containerId: "x-integry-container",
    showApps: false,    
    renderMode: IntegryJS.RenderModes.INLINE,
    viewStyle: IntegryJS.ViewStyles.COMPACT,
});

Customize the styling

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

Last updated