Customize Connect

All customizable options for design and functionalities are controlled by the options that are entered directly as parameters into the Connect script.

Here's an example:

import RailzConnect from '@railzai/railz-connect';
import {useEffect, useRef} from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      businessName: '<Your Business Name>',
      redirectUrl: 'https://www.railz.ai/success',
      closeRedirectUrl: 'https://www.railz.ai',
      metadata: [
        {
          name: "businessLocation",
          value: "canada",
          webhookLocation: ["header", "body", "query"]
        }
      ],
      // Add additional Railz Connect configuration parameters here
    });
  },[])
  return (
    <div id='railz-connect' ref={ref}></div>
  );
}

export default App;

Opening Connect

Choose which method you want Connect to open when integrating it in your application.

Business Name

Business Name Example

// Use this script as a guide to add custom business name to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: "<Your Widget Id>",
      businessName: "myBusiness-123"
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Brand Customization

The theme parameter is used to update Connect's theme settings to match your brand guidelines and needs. The attributes you can use in the theme object are detailed below.

Theme Properties

Logo Properties

Primary Color Properties

Customize the primary CTA button colors by setting the primary parameter.

Secondary Color Properties

Customize the color of links and borders by setting the secondary parameter.

Branding Example

// Use this script as a guide to add branding to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: "<Your Widget Id>",
      theme: {
        fontFamily: "Inter",
        logo: {
          url: "https://github.com/railz-ai/railz-connect/raw/master/assets/images/railz-logo.svg",
          style: { maxHeight: "200px", height: "100px" },
        },
        primary: {
          background: "#A52EFF",
        },
        secondary: {
          background: "#3D58F3",
        },
      }
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Redirects

Connect will redirect the end user to a Accounting Data as a Service™-branded landing page once their account was successfully connected. We recommend setting the redirect URL to your custom landing page, which can be a Thank You page or a landing page specific to the next step in your process.

Redirects Example

// Use this script as a guide to add redirects to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      redirectUrl: 'https://example.ai/my-app',
      closeRedirectUrl: 'https://example.ai/my-app?close=true',
      options: {
        components: {
         close: true
        }
      },
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Layout & Content Customization

The parameter options is used to update both the components' visibility and text content and overall service provider settings present in Connect™.

Session Timeout

You may pass a value for Connect session timeout via the options.sessionTimeout parameter. This configuration will prevent users from seeing the Timeout screen after being idle for 2 minutes in Connect.

Session Timeout Example

// Use this script as a guide to add session timeout to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: "<Your Widget Id>",
      options: {
        sessionTimeout: 360 // 6 minutes update
      },
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Service Providers Customization

Excluding Service Providers

You may pass a list of service providers you wish to exclude from Connect via the options.services.exclude. This configuration will remove these service providers from the Connect interface.

Making Service Providers Required

The options.kinds.hideSkip array will allow you to mark types of service providers as required to complete the connection journey.

📘

For example, options.kinds.hideSkip = ['commerce'] will require business customers to have at least one successful commerce /connection. By default, accounting service providers are required, however if you do not have any accounting integrations enabled, your business customers would be able to proceed to other enabled service providers.

Service Providers Customization Example

// Use this script as a guide to add service providers customization to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      options: {
        kinds: {
          hideSkip: ['commerce', 'banking']
        },
        services: {
          exclude: ['xero']
        }
      },
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Layout Customization

The options.components object parameter will allow you to control the layout of Connect through a set of attributes in the table below.

Layout Customization Example

// Use this script as a guide to add components configuration to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      options: {
        components: {
          close: false,
          sandbox: true,
          search: true,
          watermark: true,
          header: true,
          terms: true,
          navigableProgressBar: false,
          progressBar: false,
          summary: false,
          overview: false
        }
      }
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Content Customization

🚧

Available on Enterprise plans only.

The options.content object parameter will allow you to control the content displayed in Connect through a set of attributes below.

Changing your Company or App Name

Customize the company or application name your end users will see in Connect by setting the companyName parameter in content object.

Changing Terms & Conditions Content

Customize the terms & conditions displayed to your end users in Connect by setting the terms parameter in content object. The terms parameter is an object with the following attributes.

Changing Overview & Summary Pages Content

Customize the content displayed to your end users on the Connect overview and summary pages by setting the step and helpLink parameters in content object.

Changing Service Provider Select Page Content

Customize the content displayed to your end users on the service provider selection page in Connect by setting the serviceSelect parameter in content object. The serviceSelect parameter is an object with the following attributes.

Changing Manual Service Providers Page Content

Customize the content displayed to your end users on the service provider pages requiring manual steps (non-oAuth, e.g. QuickBooks Desktop, Oracle NetSuite, Sage Intacct) by the end users by setting the manualAccountConnect parameter in content object. The manualAccountConnect parameter is an object with the following attributes.

Adding Notes To Manual Steps

Add an alert box containing a note or warning to the content displayed to your end users on the service provider pages requiring manual steps (non-oAuth, e.g. Sage Intacct) by the end users.

Sage Intacct

Add an alert box to the sage intacct steps by setting the sageIntacct parameter in content object. The sageIntacct parameter is an object with the following attributes.

Example

// Use this script as a guide to add components configuration to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      options: {
        content: {
          "sageIntacct": {
            "note": {
              "type": "info",
              "title": "Title Note",
              "description": "<b>Follow each instruction</b> carefully as not doing so could cause the <i>authentication</a> to fail.<p>To begin, login into Sage Intacct</p><ul><li>Go to Accounts > Company</li><li>Select Setup</li></ul>",
            },
            "steps": {
              "step2": {
                "note": {
                  "type": "warning",
                  "title": "Adding Permissions",
                  "description": "<p>This description can be precise and contain some tags, see table for details.</p>"
                }
              },
              "step3a": {
                "note": {
                  "type": "info",
                  "description": "<p>This is currently only supported for Sage Intacct, and expansion to others in the future</p>"
                }
              }
            }
          }
        }
      }
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Changing Account Selection Page Content

Customize the content displayed to your end users on the account selection page for service providers like FreshBooks by setting the accountSelection parameter in content object. The accountSelection parameter is an object with the following attributes.

Changing Confirmation & Error Messages Content

Customize the general confirmation and error messages displayed to end users in Connect by setting the parameters below in the content object.

Metadata

Add up to 5 metadata objects when adding a business through Connect. You will be able to view the provided metadata through the GET /businesses endpoint.

Metadata Example

// Use this script as a guide to add metadata configuration to your Connect™ code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
      metadata: [
        {
         name: 'orgId',
         value: 'Fina-1234'
        },
        {
         name: 'uniqueId',
         value: 'uuid-1234',
         webhookLocation: ['header']
        }
      ]
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Customizations Example

// Use this script as a guide to add Connect to your code
import RailzConnect from "@railzai/railz-connect";
import { useEffect, useRef } from "react";

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: "<Your Widget Id>",
      theme: {
        fontFamily: "Inter",
        logo: {
          url: "https://github.com/railz-ai/railz-connect/raw/master/assets/images/railz-logo.svg",
          style: { maxHeight: "200px", height: "100px" },
        },
        primary: {
          background: "#A52EFF",
        },
        secondary: {
          background: "#3D58F3",
        },
      },
      metadata: [
        {
         name: 'orgId',
         value: 'Fina-1234'
        },
        {
         name: 'uniqueId',
         value: 'uuid-1234',
         webhookLocation: ['header']
        }
      ],
      options: {
        content: {
          serviceSelect: {
            title: "Select the service below",
            subTitle: "Your selection will help us serve you better",
            searchPlaceholder: "Begin typing to search",
            searchLabel: "Search Field",
          },
          terms: {
            markup:
              "<br/><br/><br/>Using this application confirms you have read our ",
            link: "https://railz.ai",
            linkText: "Terms and Condition",
            linkType: "external",
          },
        },
        services: {
          exclude: ["dynamicsBusinessCentral", "wave"],
        },
      },
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Result