Web Widget with Integrated Authentication

Overview

The CRS widget allows easy integration into any site. Limited coding knowledge (e.g. HTML and CSS) is needed to activate and use the web widget. The widget is designed as a responive interface to support both full websites and mobile experiences.

The CRS widget can be customized to represent your look and feel in order to strengthen your relationship with customers. It can be customized to embed seamlessly into your site including an embedded logo for personalization. It is possible to embed a logo for additional personalization

The CRS widget includes credit features configured to your needs. These features are upgradeable as your site and requirements grow. No changes are required to your site for compliance.

For this option, you embed an iframe and configure the Host URL where you will be loading the widget. For testing, CRS can configure that any Host URL to load the widget (including localhost); this allows you to try this integration option by locally serving an html file with the following iframe. For production, the URL must be locked down so that the widget can only be rendered from that host.

From sign up to launch in less than one week

Simple Integration Guide

Web Integration Requirements:

API Key
Host Registration (eg your web site address)
Integration Host & parameters
Configuration Flags
Primary Theme Color (six character hex, without #)
View Option (options include: dashboard, all-in-one, or tile)
Logo URL (URL of a logo to replace the CRS logo)

Only the registered host can serve the UI with the designated API Key. Embed iFrame on a blank page under the registered host. Style the iFrame/page to suit your needs

To embed into HTML, create an iframe as shown in the following example with its src reflecting this color-coded URL:
"https://efx-dev.stitchcredit.com/api/users/start?key=[API-KEY]&ocf=[FLAGS]&oct=[COLOR]&view=[VIEW-OPTION]&ocl=[LOGO-URL]"

Sample Embed page


<html>
<head>
  <title>eCredit Monitoring</title>
  <meta name="description" content="CRS Consumer Credit Reports"/>
  <link rel="icon" href="/favicon.ico">
  <style>
    body { background: #F9FAFB; }
    #sc-iframe { border:none;overflow:hidden;padding:0px;margin:0px;
    width:100%;height:100vh;z-index:1;position:absolute;left:0;top:0; }
  </style>
</head>
<body>
  <iframe id="sc-iframe"
    src="https://efx-dev.stitchcredit.com/api/users/start?key=[API-KEY]&ocf=[FLAGS]&oct=[COLOR]&view=[VIEW-OPTION]&ocl=[LOGO-URL]"
    width=“100%” height=“100vh”>
  </iframe>
</body>
</html>

Webhook Integration

Webhooks are available to notify you when an alert (or other notifications) comes in so that you can message users in whatever fashion you wish to return to your site.

Please refer to additional details on Webhook Integration.

Web Messaging Integration

To interact with the Consumer Credit Widget, you will need to implement a structure using a window event listener.

Please refer to additional details on Web Messaging Integration.

Samples

Here is an example of the iframe code configured with API-Key, flags, and color:


<iframe id="sc-iframe"
  src="https://efx-dev.stitchcredit.com/api/users/start?key=d4eeb874-c6ae-4977-8b87-c0618b0bc194&ocf=537952251&ocl=https://www.premierconsumer.org/assets/images/en/logo.jpg&oct=5f5ce0">
</iframe>

Users must register for a CRS account through the widget's registration and identity verification screens. Many fields can be pre-populated (but not SSN and DoB).

Users will need to log into the widget with an email and password after having already logged into your service.

Here is an embedded example:


<html>
  <head>
    <title>eCredit Monitoring</title>
    <meta name="description" content="CRS Consumer Credit Reports"/>
    <link rel="icon" href="/favicon.ico">
    <style>
      body { background: #F9FAFB; }
      #sc-iframe { border:none;overflow:hidden;padding:0px;margin:0px;
      width:100%;height:100vh;z-index:1;position:absolute;left:0;top:0; }
    </style>
  </head>
  <body>
    <iframe id="sc-iframe" src="https://efx-dev.stitchcredit.com/api/users/start?key=[API-KEY]&ocf=[flags]&oct=[color]" width=“100%” height=“100vh”></iframe>
  </body>
</html>

Responsiveness Breakpoints

These are two main breakpoints we use to scale desktop, tablet, and mobile devices. Devices with a width larger than 960px will be treated as a desktop view, devices with smaller widths fall under tablet and mobile device scaling thus will be displayed as a mobile view. With that being said, the widget should scale well on small, medium, and large devices without issues.

Each breakpoint (a key) matches with a fixed screen width (a value):