Getting Started with Custom Components
Discover what Custom Components are and how to get started with them in Limio
Custom Components are custom React components built by external developers to fit unique requirements, integrations, or designs. Custom Components, similar to Limio Components, can be used in Limio's Page Builder by the marketing, product, and commercial teams, enabling collaboration across Engineering and Business teams.
For example, developers may build Custom Components to:
Display: Create a pricing matrix or a price calculator, using the Limio Offer SDK.
Personalisation: Verifying user information such as their account status to redirect them to the most appropriate offers, using Limio User SDK.
Business process: Check availability and deliverability of a product in a third-party fulfilment platform, using External Services.
Promotions: Surface an exit intent popup that adds a promo code to the cart or automatically add a promo code when two products are added (bundle & save), using Limio Cart SDK.
Personalisation: Surface upsell options in self-service for a subset of subscribers, by using a combination of the Limio Offer & User SDK.
Custom Components are React components, so you only need React knowledge to create a custom component in Limio. To work with Custom Components, Limio provides a Developer Experience that aims to allow developers to do their work in the way most natural to them, this means:
To be able to develop locally and see results quickly in Storybook
To be able to support your own release and versioning process in GitHub, GitLab or AWS CodeCommit.
To be able to use a CI process such as Circle CI within your to release changes in a controlled environment
Before we begin
To successfully develop custom components for Limio, make sure you have:
React 18+ knowledge
A user in Limio
Installed yarn or npm as a package manager
Git knowledge
We'll use the following terminology:
Limio to refer to the Limio application where a user log-in
Limio Shop & Self-Service to refer to the published pages built in Limio. Those pages are then accessed via an end-user to transact and perform commerce actions.
Limio Components refers to Limio's out-of-the-box components.
Custom Components are the components you will build.
Limio Components Repository is the master repository that stores your custom components and is linked to your Limio application.
Getting Started with Limio Components Repository
To start, you will need to clone your Limio Components Repository, which is in AWS CodeCommit. Follow the steps below to copy it.
Once cloned, you will then be able to set up mirroring into any Git-based software platform such as Github and GitLab.
Step 1: Receive Your Credentials
Email support@limio.com to request access to your Limio Component Repository with the users you request access.
Limio Support will provide you with a username and password for HTTPS Git access for each requester. The username is typically the requester’s email(s), but you can request a shared email address (e.g., developers@domain.com).
Limio Support will also provide the Limio Component Repository clone link, which varies based on your region and tenant (see Step 2).
Important: Download and securely store these credentials in a password manager. You will also need them to connect an external CI.
Step 2: Clone the Repository
Run the following command with the Limio Component Repository clone link provided by Limio Support in Step 1.
EU Example: eu-central-1 (Frankfurt)
US Example 2: Cloning from us-east-1 (N. Virginia)
If you receives an error code such as a 403, you may not be authorised to perform this request. Contact support@limio.com.
Step 3: Authenticate
When prompted, enter the username and password provided in Step 1. Once authenticated, the repository will be cloned to your local machine, and you can begin working with it.
Start working with your Limio Components Repository
Creating Custom Components
Once you have cloned the Limio Components Repository, you will see two directories:
component-playground: An interactive playground in Storybook with all the context a Limio Shop & Self-Service would have. Storybook is a frontend workshop for UI development that allows developers to work with out-of-the-box Limio Components or Custom Components in isolation.components: A folder that contains all the components, whether Limio Components or Custom Components that will be built and made available in Limio's Page Builder.
To work with components, load the README file in your cloned repository and follow the guidance there. You can also find it here.
It will also help to:
Be familiar with Limio’s development guidelines to follow best practices.
Understand how to define and validate props using Prop Types.
Loading Custom Components into Limio
Once you have made changes to a Custom Component in your cloned repository, you can then use standard Git methods to commit and push changes to your Limio Component Repository.
Once you push changes to the Limio Component Repository, Limio will automatically build the component. If the Repository Component Build is successful, the Custom Components will take a couple of minutes to load or updat in the Limio application. Users can then see the Custom Component in Limio's Page Builder (see below).
If you cannot see your component, try doing a hard refresh. On Mac: Press Cmd + Shift + R. On Windows: Press Ctrl + Shift + R.
Adding more developers to collaborate
If you'd like to collaborate with other developers, you have two options:
You can contact Limio to setup additional users to your Limio Component Repository, then go through the steps 1 to 3.
You can setup repository mirroring in GitHub and GitLab, then add more users there. Learn more on how to do this here.
Last updated
Was this helpful?
