Creating a component (Legacy)

In this walk-through, we are going to create a reusable '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.

This is the developer documentation for legacy custom components. Legacy custom components will be deprecated. Please go to the documentation on new custom components and Developer Experience here: Custom Components

Adding an example component as an Asset to Limio

Call to action

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

• Headline

• Subline

• Call to action text

• Call to action url

• Image

• The terms and condition text

• The terms and condition url

Limio components are React components. Anything that you can package up into a React component can be used in Limio (see this section for more details on how to structure your own components and some guidelines about what is accepted in a component)

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,
  image_href,
}) => {
  return (
    <section className="CTABanner">
      <article className="Container">
        <header>
          <h1 className="Headline">{headline}</h1>
          <h2 className="Subline">{subline}</h2>

          <a className="CTAButton" href={cta_href} color="#191414">
            <span>{cta_text}</span>
          </a>

          <div className="Terms">
            <p>
              {terms_summary}{" "}
              {detailed_terms_href && (
                <a href={detailed_terms_href}>Terms apply.</a>
              )}
            </p>
          </div>
        </header>
        <img src={image_href} alt="headphones" />
      </article>
    </section>
  );
};

export default CTABanner;

To add this example component to your Limio Catalog:

• Download the example code here or clone it with the following:

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

• Upload the asset to the catalog:

1. Go to the assets section of Limio using the side navigation

2. Click the "+" icon above the Assets tree

3. Click "Add Assets"

4. Give your asset a new name

5. Select the template - should be "AssetBase" unless you have a custom template set up

6. Drag the directory of the example you just downloaded onto the drop area

7. Wait for the asset to upload, this may take a few minutes depending on size of your component

8. When complete you should see the code of your index.js file.

9. Click 'Save'

10. In order for your component to be bundled you'll need to click "Builds", then "Rebuild" and after the build has been completed click "Publish".

The fields marketers can configure components with are set in the component package.json file, inside an array with the key limioProps. You can see these in the example here.

When the component is dragged into a page builder these fields will be populated in a menu for the marketer to configure how they like and these values are then always passed into the component when rendering it.

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

Adding your own component as an Asset to Limio

The process above shows you how to upload an example asset which conforms to the requirements of a component being uploaded to Limio.

This is a list of those requirements & notes on anything that you should/should not do with your component:

• Your component module must be exported as the default export from your entry file.

• You can structure your component across many files in multiple directories or just in a single file.

• Only .css files are supports for styling.

• Only a small number of external packages are currently available for use in uploaded components right now. If there is a specific package that you need to use, please contact support and we will try our best to accommodate.

• Use limioProps in your package.json to make your component customisable.