my image Some great alternative text

Article

How to set up an inline component

You can use inline components to seamlessly add new elements to your pages and engage your users with personalized content, CTAs, and more.

my image Some great alternative text

Inline components can be inserted within existing pages, unlike overlay components which are added on top of a page, such as a popup or sidebox.

How to set up an inline component

First step is to choose a component. Via the Components tab, you can view the complete library of components that are ready out of the box. You can use the filters to view all inline components at once or also filter by categories such as onboarding, activation, forms, and more depending on your needs.

component-overview-inline

You can preview the different components before choosing the one you want to use. Once you've made your choice, click Create to get started.

inline-component-preview

Inline component settings

This will take you to the Settings tab. You might notice that the settings for a component are very similar to on-site experiences. You give your component a name, define the page(s) it should appear as part of as well as the audience(s) that should see it.

After adjusting the settings, first click Save and then click Open editor. Once you are in the editor, as in the example below, you can click Configure component.

editor-configure-component

Inline component design

First, you have to define where you want the component inserted. You can do this via the Inline tab. You have to select the radar icon (marked on the screenshot below) and then click on an element on the page. While you are hovering with the mouse, a red rectangle will appear around elements, showing you what would be selected when you click.

component-radar-selector

Once you make a selection, the component will appear after that element. However, you can also specify whether you want your component to appear before or after that element, or to replace it. If you change this setting, the component will automatically readjust.

editor-component-view

After this is done, you can start configuring your inline component to make it fit your particular use case. You can change the headline, text, image(s) along with their placement, fonts, colors, etc.

Lastly, establish whether there should be an email collector and if you want to have a CTA button or two, what the buttons should say and where they should take a visitor to and so on. If you need further customization, you can also use the Other section to add custom CSS and Javascript and to switch on Expert mode.

component-editor-expert

Once you've made all the changes you need and your inline component is ready, make sure to save, create new version and publish before exiting the editor. Then click start experience at the Settings tab for this component which we've seen earlier.

Ps. If you haven't already defined your themes to match your company branding, you can do that via the Themes tab under account settings. This is something you (or a designer from the team) has to do once and then your theme(s) can be applied to all your components.

Frequently asked questions

We have bars, pop-ups, side-boxes, popovers, inline, and multi-step components. If you have an idea for a component, contact us! You can also build your own using our component framework and API, or request custom components.

Overlay components render on top of your web page and include bars, pop-ups, popovers, side-boxes, and such. Inline components on the other hand are elements that can be placed directly within a page, without breaking the experience.

my image Some great alternative text

Friendly support from real people

We’re here to help

We are known for our quick responses if you have an issue. Feel free to ask us anything. But you can also ask our conversational AI a question, of course!