👉 General information about components

🚩 Heads up

This feature is only available for early adopter clients at the moment. If you want to be part of this program, please contact [e-mail]. 

 

📖 Definition

The component feature enables you to create component templates to be used in the editor of one or several campaigns, without necessarily changing the code.
A template can be reused in the same account or in different accounts and you can add one or several identical components to the same campaign, variation or sub-test, within the visual editor of your campaign. 
Using components lets you scale up when duplicating (to brands, markets, languages...) a performing campaign and makes a recurring campaign easier to adapt.

Using a component can be useful when:

• You want to set-up a string of messages (popins, banners, overlays etc.) for your marketers to use systematically the same layout (to preserve UI, design system, consistency though your website).
• You want to share and spread this previous work on your different AB Tasty accounts (because you manage several websites, or several languages versions of your website through different AB Tasty accounts).
• You plan to reuse the component in another account, campaign, variation or in the future for recurring campaigns, instead of duplicating your campaign.
• You want to reduce the back and forth communication on low-value edits (colors, font sizes, images...) between your digital marketing team and your design team.
• You want to keep control over time.

Examples of Components you can create: 

• Popin or other kind of promotional widget with a specific behavior/ UI path you can’t find in the AB Tasty widget library.
• A complex tracker, such as “event sent each time the user puts an item in their basket, then goes to the basket page, then comes back to the homepage”.
• Reusable buttons, bullet point lists, popovers, product tours, carousels and so on: every single element which already exists in your design system and will be usable in the AB Tasty visual editor as an infinite source of small components to create design system friendly campaigns.

⚙️ Configuration

The component feature works as follows: 

👉 A technical user of the account creates a component template from scratch by configuring the JS, HTML and CSS code as well as the code of the form (optional) that will be used in the editor to personalize the component.

👉 Another user (or the same) uses this template in the variation/page/experience of a campaign.

🔎 Glossary

Component	Component template imported in the editor of any campaign and adapted (in some cases) to meet specific needs. 👉See here how to use a template component in a campaign
Component template	Piece of code configured to be used in one or several campaigns. It serves as a base for a component and must contain the minimum code to make a component work. Once a template is used in a campaign, we talk about a component. 👉See here how to create a component template
Form	Section where you can code a form that will be displayed in the visual editor of a campaign to let the non-technical users customize components without using code. Component form set-up in our dev portal
Asset	Section where you can upload some files (images, video, sound) to link your component to.
Component template library	In the editor : list of all the component templates created in the Components page.

For more information about components, refer to the FAQ.

Need additional information?

Submit your request at [e-mail]

Always happy to help!