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:
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.
​
API Docs - Previous
Using Webhooks
Last updated 1 year ago