Setup Railz Connect v1 (Legacy)

Setup our legacy version of Railz Connect in your application

📘

Older Version of Railz Connect

Railz Connect v1is a legacy version of Railz Connect. New features and functionality are not available in this version. New integrations should use Railz Connect v2.0.

Setup Railz Connect™

There are two ways to integrate Railz Connect™ into your application:

  1. via NPM
  2. via CDN Script

You can follow our Quickstart Guide to quickly get Railz Connect up and running quickly or follow the steps in our GitHub examples.

Via NPM

Node Package Manager can be used to install Railz Connect into your frameworks. Follow the steps below to install.

Run the following command to install the package.

// with yarn
yarn add @railzai/[email protected]

// with npm
npm install @railzai/[email protected] --save

Setup the script in your framework of choice

Angular
<div id='railz-connect' #railzConnect></div>
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import RailzConnect from '@railzai/railz-connect';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
    @ViewChild('railzConnect', { static: false }) railzConnect: ElementRef;

    ngAfterViewInit(): void {
        const widget = new RailzConnect();
        widget.mount({
            parentElement: this.railzConnect.nativeElement,
            widgetId: '<Your Widget Id>',
            // Add additional Railz Connect configuration  paramaters here
        });
    }
}
React
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>',
      // Add additional Railz Connect configuration  paramaters here
    });
  },[])
  return (
    <div id='railz-connect' ref={ref}></div>
  );
}

export default App;

App.vue
<script setup>
  import { ref, onMounted } from 'vue'
  import RailzConnect from "@railzai/railz-connect";

  const railzConnect = ref()

  onMounted(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: railzConnect.value,
      widgetId: '<Your Widget Id>',
      // Add additional Railz Connect configuration  paramaters here
    });
  })
</script>

<template>
  <div ref="railzConnect"></div>
</template>

📘

NPM Examples

More examples are provided in CodeSandbox.

Via CDN Script

On the dashboard go to Railz Connect > Setup in the left sidebar navigation menu of the Dashboard.

34883488

Railz Connect setup page in Railz Dashboard. Click to Expand.

This method allows you to embed railz connect in the <body> tag of your HTML. To integrate Railz Connect™ into your website or application, copy the following script and paste it into your website's HTML source code before closing the </body> tag.

You will need to retrieve your widgetId from the dashboard by going to Railz Connect > Setup in the left sidebar navigation menu of the Dashboard.

📘

Where to Place Railz Connect?

The code must be inserted into any page you want to display Railz Connect on. Note that this will not slow down your web pages.

️Do Not Download & Host the railz-connect.js

Railz always publishes non-breaking updates and improvements to Railz Connect™. To ensure that you're using the latest version of Railz Connect™, do not download and host the railz-connect.js file within your app.

<!-- Insert this div where you want Railz Connect to be initialized -->
<div id="railz-connect"></div>


<!-- Start of Railz Connect script -->
<script src="https://cdn.jsdelivr.net/npm/@railzai/[email protected]/dist/railz-connect.js"></script>
<script>
  var widget = new RailzConnect();
  widget.mount({
    parentElement: document.getElementById('railz-connect'),
    widgetId: 'YOUR_WIDGET_ID'
    // Add additional Railz Connect configuration  paramaters here
  });
</script>
<!-- End of Railz Connect script -->

📘

Configure your Railz Connect

You have a variety of design configuration options to fit your brand experience. See Parameters for more details.

Customize Railz Connect V1

All parameters and options available to you are described below:

Business Name

ParameterDefault valueValid values
businessNameUUIDstring, length=[2, 40], does not contain {% [ ] \ *( ) { } "}\

The unique identifier of the business as defined by you. If left as null, a unique identifier for the business will be assigned by Railz. The business name should be a 2 to 40 characters long and must not contain any of the following special characters: {% [ ] \ * | ( ) { } "}.

Layout Customization

ParameterDefault valueValid values
serviceFilterEnabledtruetrue, false
closeEnabledfalsetrue, false
closeRedirectUrlnone-set[string URL]
headerEnabledtruetrue, false
removeRailzWatermarkfalsetrue, false

Removing Service Filter

To hide the search bar in the service provider selection menu, you need to specify the parameter serviceFilterEnabled=false.

Enabling Close Button

To add a close button to Railz Connect™, you need to specify the parameter 'closeEnabled=true'. If closeEnabled=true, closeRedirectUrl is required, which will redirect the end-user to the provided URL when they click close.

Hiding Header

You can remove the text from the header by specifying the parameter headerEnable=false.

Removing Railz Watermark

You can remove the Railz logo watermark by setting 'removeRailzWatermark=true'.

🚧

Removing the Railz watermark is only available on paid plans.

Brand Customization

ParameterDefault valueValid values
brandColor38C076Hex Color Code
accentColor000000Hex Color Code

Brand Color

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

Accent Color

Customize button background colors by setting the accentColor parameter.

️ Hex Color Code

You must not include the # character in the hex color code.
✅ Good usage: brandColor=38C076
❌ Bad usage: brandColor=#38C076

Redirect

ParameterDefault valueValid values
redirectUrlnone-set[string URL]

Railz Connect™ will redirect the end-user to a Railz 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.

Metadata

ParameterDefault valueValid values
namenone-setstring, length=[2, 40]
valuenone-setstring, length=[2, 255]
webhookLocationnone-setarray, enum values header, body, query

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

  • name: The metadata property name - e.g. country.
  • value: The metadata property value - e.g. Canada.
  • webhookLocation: If provided, metadata will be sent in the webhook event response header, body and/or query param. See webhooks for more details.