How to set-up an inline component

With inline components you can seamlessly add new elements to your pages and engage your visitors in new ways with personalized content, testimonials, and CTAs.

You can preview the different inline components before choosing the one you would like to use. Keep in mind that the visual aspects are customizable so focus on functionality first. Once edited, your final inline component will be something unique to your business and website.

Inline component types

• Content can be used to highlight content pieces like articles or gated whitepapers while moving visitors further down the funnel. However content can be anything you want it to be. Say if you want to make certain features more prominent for a specific persona, that too is possible. Show different content pieces to visitors based on their product interest category, lead status, or other targeting conditions.
• Testimonials allow you to highlight customer logos and quotes and can be personalized to fit the location or industry of your website visitors. Afterall, your customers are your best salespeople.
• Call to action (CTA) can be used to encourage your website visitors to complete a certain action such as signing up for a newsletter or booking a demo.

How to set up an inline component

When at the Experiences tab, you can click Create experience and then select Create new component. By default, you will see inline components, however if needed you can also access overlays here with the click of a button. Now that you know the different types of inline components available, you can decide easier.

Simply click on an inline component to preview it. On this screen, you will already see some of the settings that you can adjust if you decide to use this inline component. Most important here is to select one of your predefined themes. (If you haven't set-up a theme that matches your company branding yet, you can do that in the next screen.) Once you've made your choice, click Create component to get started.

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.

Ps. If you haven't already defined your themes to match your business and website, you can do that here using the Edit theme button. 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.

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

Inline component design

Important: With inline components keep in mind that they will not be visible in the editor until you have defined where on the page you want to show them.

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 light blue rectangle will appear around elements, showing you what would be selected when you click.

After you've selected an element, using the panel on the right, you can select whether you want your component to appear before or after that element, or to replace it. Once you've decided on the placement, click Save draft and your component will appear on the page, within the editor.

Once 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.

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.