This article will provide the technical aspects and packages required to build your app correctly.
We'll go into detail about which files and packages to download:
To start, we'll create the manifest file.
This file helps us gather important information about our app, like the identifier, name, icon, files, etc. (similar to a package.json
file).
<aside> 💡 Create this file in the app root folder.
</aside>
Hover over the code block to copy to your clipboard
interface ManifestSettings {
type: 'string'; // Only string supported for now
label: string;
required: boolean;
placeholder: string;
}
interface Manifest {
extensionId: string;
version: string;
name: string;
isBeta?: boolean;
sectionTabId?: string;
type: 'tracking'
| 'form'
| 'payment'
| 'media'
| 'media-provider'
| 'enhancement'
| 'utility';
description: string;
iconUrl: string;
moreInfoUrl?: string;
serviceUrl?: string; // The more info might be different from the website of the provider (mostly needed for media-providers)
categories: string[];
settings?: { [key: string]: ManifestSettings }; // For usage when the app doesn't render a component on the editor
files: string[];
}
The method used to build this app contains properties that identify the primary component we can render in a Smart Builder project.
The component({...})
method call is Unbounce's way of packaging our component so it can be registered properly. There are other useful methods that work together with this one.
Here’s an example:
import React from 'react';
import component from 'config/global-dependencies/component';
import Schema from 'config/global-dependencies/schema';
export const Component = component({
componentTypeId: '<your component id>',
displayName: '<your componen name>',
schema: '<your schema object configuration>',
Component(componentProps) {
// Some stuff you might do before returning the component.
return (
// Here goes the react component you want to render
);
},
});
In short, this method returns the packed component for the Smart Builder app.