™2 min read
Load without blocking
<div id="cc-finance" style="min-height:120px"></div>
<script src="/cc-widget.js" defer></script>defer keeps the script off the critical path, and a reserved min-height prevents cumulative layout shift when the content arrives.
Lazy-load below the fold
new IntersectionObserver((entries, io) => {
if (entries[0].isIntersecting) { initWidget(); io.disconnect(); }
}).observe(document.getElementById('cc-finance'));If the widget sits below the fold, only initialise it when it is about to scroll into view. Combined with a cached catalogue, the widget costs almost nothing on load.
Frequently asked questions
How do I avoid layout shift?
Reserve the widget's space with a min-height so the page does not jump when content loads. This protects your Core Web Vitals.
Should the widget block rendering?
No. Load it deferred and, if it is below the fold, lazy-initialise it so it never delays the visible page.
Related reading
Quickstart: embed a product picker with the public API
A product picker is the simplest high-value embed: fetch the catalogue, render options, link to apply…
Read →Quickstart: Cache the product catalogue correctly
The catalogue changes rarely, so caching it removes the API from your hot path and keeps you well under the…
Read →Quickstart: Make your finance widget accessible
A funding widget must be usable by everyone — semantic HTML, keyboard support and a live region for the quote…
Read →Quickstart: call the public API from the browser safely
The public ring sends permissive CORS headers for read endpoints, so you can call it straight from the…
Read →Funding for UK limited companies
Credicorp lends to your company, not to you personally — short-term working capital with no personal guarantee. See what your business could access.