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:

Supporting Packages

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>

Creating the Manifest file

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[];
}

Methods required to build an app

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.