Adding a component

In this walk-through, we are going to create a re-usable 'Call To Action component' and add it as an asset in Limio, so that a marketing user can configure the component for use on a page.

Adding a React component as an Asset to Limio

Call to action

This component will offer the marketing use the ability to change:

  • The headline

  • The subline

  • The call to action

  • The terms and condition text

  • The image

  • The background color

Limio components are React components. Anything that you package up into a React component can be used in Limio. The only criteria is that the module that you create must export the component as the default export.

To enable Marketing users to make changes, the easiest way is to set the defaultProps on the React component: these will be used as the initial configurable props for the component. You can then further manage the exposed properties in the asset editor if you need to hide, add a property or to change the type of a property.

Let's take this example component:

import * as React from "react"
import './banner.css'
const CTABanner = ({
headline,
subline,
cta_text,
cta_href,
terms_summary,
detailed_terms_href,
textAlign,
background_color,
background_image_href
}) => {
return (
<div>
<section className="Section"
style={{
backgroundImage: `url(${background_image_href})`,
backgroundColor: background_color
}}>
<article
className="Container Landing"
style={{
textAlign: textAlign
}}>
<header className="header">
<div className="header2">
<div className="content">
<div>
<h1 className="Headline">{headline}</h1>
</div>
<div>
<h2 className="Subline">{subline}</h2>
</div>
<div className="ButtonGroup">
<div>
<a
className="CTAButton"
href={cta_href}
color="#191414"
tabindex="0"
rel="next"
>
<span>{cta_text}</span>
</a>
</div>
</div>
</div>
</div>
</header>
<footer className="FooterContainer">
<div className="Footer">
{terms_summary}{" "}
{detailed_terms_href && (<><a href={detailed_terms_href}>Terms apply</a>.</>)}
</div>
</footer>
</article>
</section>
</div>
)
}
CTABanner.defaultProps = {
headline: 'Students 3 months of Premium for £0.99.',
subline: 'Only £4.99/month after. Cancel anytime',
cta_text: 'Get Premium',
cta_href: '/purchase/campaign/student',
terms_summary: 'Offer not available to users who already tried Premium. Offer ends 30 Jun 2019.',
detailed_terms_href: '/legal/student-intro-offer-terms-and-conditions',
background_image_href: 'https://campaigns.scdn.co/images/Desktop%20Asset%20-%20Student.jpg',
background_color: "#9487b4",
textAlign: "left"
}
export default CTABanner

To add this example component to the Limio Catalog:

  1. Download the example code

git clone https://github.com/limiohq/cta-banner.git

2. Create a new asset in the catalog

> Assets > (+) > Add Assets
Name: CTA Banner
Template: Asset Base
> Drag & drop the downloaded git content folder into the asset page.
> Click Save

Once you have done that, you will see the following view. This will allow you to change the props that are exposed to the marketing user and to configure their types and available values.

That's it - you are done and your marketing users will have access to a new component that they can configure.