Skip to main content

​
Integrating Credible Widgets

Credible widgets let partners embed Credible experiences (including embedded prequalification) directly on partner-owned pages. There are two supported integration methods:
  1. Credible SDK (preferred)
  2. Direct iFrame
The right method depends primarily on how frequently you will publish new pages containing widgets and how much you value responsiveness and analytics.

​
Choosing a Method

If your team regularly ships new pages with Credible widgets, the SDK is the default choice because it:
  • Automatically builds the widget URL correctly (reducing setup errors)
  • Enables auto-resizing for responsive layout changes
  • Enables richer analytics (e.g., viewport events)
If widgets are rarely added/changed, a direct iFrame can be acceptable, but it carries tradeoffs (below). If you choose iFrame, you own more of the correctness and responsiveness burden.

​
Tradeoffs: Using iFrames Instead of the Credible SDK

​
No auto-resizing

Without the SDK, the iFrame container is fixed-size and may not respond well to:
  • Mobile vs desktop breakpoints
  • Browser resizing
  • Dynamic content height changes
This often forces compromises or multiple device-specific implementations.

​
Manual implementation of URL parameters

Without the SDK, you must manually construct the widget source URL. This can include many parameters (often 10+), and mistakes can break:
  • Attribution
  • Source tracking
  • Reporting consistency

​
Tracking limitations

Some analytics are only available via SDK instrumentation. Example:
  • Partners_widget_in_viewport (used to measure true view counts and CTR = clicks / views)

​
Credible SDK

The widget library includes a JavaScript SDK that improves integration quality and reduces partner maintenance.

​
Key benefits

  • Auto-resizing: responsive widgets that adapt to container changes
  • Snowplow event tracking: richer widget-level analytics and reporting
  • Load-time optimization: optimized loading so widgets do not materially slow partner pages

​
Implementation principle

For each widget in the Widgets Library, you’ll find a copy/paste code block that is sufficient to load the widget. Most partners should start there and only use advanced configuration if needed.

​
Testing Widgets (Stage vs Production)

When testing, use stage rather than production.
  • SDK widgets: set environment: 'stage' (or the applicable stage value used by your SDK configuration).
  • AMP iFrames: update the URL domain to stage.qa.credible.com.

​
Analytics Capabilities (High-Level)

Credible reporting typically supports:
  • URL-level reporting: which pages drive views, clicks, and downstream conversion
  • Widget-level reporting: which widgets perform best on your site
  • User-level reporting: partners can pass a unique user identifier and receive it back in reporting
    • Not currently supported for AMP iFrames

​
Embedded Pre-Qualification Widgets

Credible offers an embedded prequalification experience (iframe-based, typically loaded via SDK) that sits natively in partner content. Users can complete the steps needed to reach prequalification and view offers within the widget, then click through to Credible to finish additional steps needed to close the loan.

​
Current embedded prequal offering

  • Student Loan Refi Embedded Prequal Widget
  • Personal Loans Embedded Prequal Widget (where applicable in your widget library configuration)

​
Embedded Prequal: Advanced Capabilities

For teams that want more control, embedded widgets support additional configuration patterns:
  • Custom colors (theme variables)
  • Passing a partner sub ID / unique ID
  • Overriding campaign/page tracking value
  • Real-time funnel event callbacks
Navigate to the relevant subsection below.

​
Custom Colors

Partners can apply primary and secondary theme colors via ui.customStyles (HEX values). These are applied as CSS variables inside the widget.

​
Supported marketplaces (where available)

  • Personal Loans
  • Student Loan Refi
  • Home Insurance
Example configuration 
ui: {
  customStyles: {
    primaryColor: '#182265',
    secondaryColor: '#B9912D',
  }
}