You can use a built in <Script /> component to load external scripts or use inline scripts in your app. This component is located in the SmartBuilder SDK package.

The SDK package is available in Smart Builder through the window object. The sample repo is already prepared and configured, so you should only run npm install to start developing your app.

Note: If you see the dependencies on the sample repo, you will notice an NPM package called unbounce-smart-builder-sdk-types . This package contains all the types for every SDK component and it should be available for you after installing your dependencies.

import { WithControls, Script } from 'smart-builder-sdk';
import { ComponentProps } from 'unbounce-smart-builder-sdk-types';

Usage

From the sample repo run npm install and import Script from “smart-builder-sdk” where you need it:

import { Script } from 'smart-builder-sdk';

Use your <Script /> component like you would use any other React component, e.g.:

const MyComponent = ({ ...props }: MyComponentProps) => {
  return (
    <>
      <Script
        mode={props.mode}
        dependencies={['some dependencies']}
        inlineScript={'some code as string'}
      />
      <Button
        onClick={() => {
          console.log('understanding the Script component');
        }}
      >
        Do something here
      </Button>
    </>
  );
};

Props

Mode - required

type: "edit" | "view" | "publish"

Smart Builder has 3 modes: “edit”, “view” or “publish”. It is important to distinguish this modes because the Script will run differently depending on the mode. To understand the 3 modes go to How it works section of this document.

externalScript - ****optional