Skip to main content

Non React Components

Make sure you've installed Courier into your workspace before attempting to integrate these components.

Github Docs: Embedded Inbox

All of the Inbox components are built in React but we do have options for non-react development teams. These components can be embedded in any website using a simple <script> tag and courier specific html tags. This is useful if you don't have a React build but still want to use Courier's components.

Installation is simple. All you need to do is add <courier> components to your page and add 2 script tags to the bottom of the <body> or <footer>.

  1. Setup Courier Configurations
  2. Download the Components

This section covers synchronous initialization where you have all information like the clientKey and userId available on first render. See Async Initialization below for how to control the initialization.

<body>
  <section>
    <h1>Hello World</h1>
    <courier-toast></courier-toast>
    <courier-inbox></courier-inbox>
  </section>
  <script type="text/javascript">
    window.courierConfig = {
      clientKey: "{{CLIENT_KEY}}",
      userId: "{{USER_ID}}",
    };
  </script>
  <!-- Be sure to use the appropriate version -->
  <script src="https://courier-components-xvdza5.s3.amazonaws.com/v{{CURRENT_VERSION}}.js"></script>
</body>

Configuring Components​

You can configure components in 2 different ways.

  1. Inline html attributes
  2. Through window.courierConfig.

These are the same properties passed to the React components

Inbox Config

Toast Config

Inline configuration attributes will take precedence over window.courierConfig options.

Inline​

Configuring simple options through HTML attributes is simple. For each configuration, make sure you are using kebab-case https://www.theserverside.com/definition/Kebab-case instead of camelCase because HTML attributes are case insensitive.

Example:

<courier-toast auto-close="false"></courier-toast>

window.courierConfig​

Some components have many options and adding many attributes to HTML entities can be cumbersome, you can also add configuration through our window.courierConfig object.

Example:

window.courierConfig = {
  components: {
    toast: {
      autoClose: false,
    },
  },
};

Updating Component Configs​

You update configuration of components by calling the following. These will trigger a re-render and update the configuration right away.

window.courier.inbox.setConfig(config: InboxConfig);

window.courier.toast.setConfig(config: ToastConfig);