> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flinks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Choose a Front-End Solution
> The first step to connecting your customer accounts is choosing a front-end solution. The front-end solution is the interface that your customers use to link their banking data.
export const FlinksVideo = ({videoId, playlist}) => {
const PLAYLIST = [{
id: '1183239584',
hash: '5b5f7c9f89',
title: 'Welcome to Flinks',
page: '/'
}, {
id: '1183239766',
hash: '4965a1d16c',
title: 'Choosing your front-end integration',
page: '/guides/connect/choose-a-frontend-solution'
}, {
id: '1183240266',
hash: '17b592a0ac',
title: 'Choosing your back-end integration',
page: '/guides/connect/choose-a-backend-solution'
}, {
id: '1183240418',
hash: 'a5adf4b7a4',
title: 'Using the Flinks API and webhooks',
page: '/guides/webhooks/introduction'
}, {
id: '1183240713',
hash: 'a6fce4b746',
title: 'Flinks Enrich Walkthrough',
page: '/guides/enrich/getting-started'
}, {
id: '1183241038',
hash: '869c6490df',
title: 'Exploring Enrich attributes in the Dashboard',
page: '/guides/dashboard/tools'
}, {
id: '1183241189',
hash: 'b03e777aee',
title: 'Flinks Upload Walkthrough',
page: '/guides/upload/getting-started'
}, {
id: '1183241410',
hash: '3a57b7e600',
title: "You're live with Flinks",
page: null
}];
const containerRef = useRef(null);
const playerRef = useRef(null);
const [ended, setEnded] = useState(false);
const currentIndex = PLAYLIST.findIndex(v => v.id === videoId);
const current = PLAYLIST[currentIndex];
const next = currentIndex < PLAYLIST.length - 1 ? PLAYLIST[currentIndex + 1] : null;
const shouldAutoplay = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('fv') === 'play';
const linkTo = page => page ? `${page}?fv=play` : '#';
useEffect(() => {
setEnded(false);
if (playerRef.current) {
playerRef.current.off('ended');
playerRef.current.off('play');
playerRef.current = null;
}
let cancelled = false;
let script = document.querySelector('script[src="https://player.vimeo.com/api/player.js"]');
const init = () => {
if (cancelled || !containerRef.current) return;
const iframe = containerRef.current.querySelector('iframe');
if (!iframe || typeof window.Vimeo === 'undefined') return;
const player = new window.Vimeo.Player(iframe);
playerRef.current = player;
player.on('ended', () => {
if (cancelled) return;
if (playlist && next) {
var allWraps = document.querySelectorAll('.fv-wrap');
for (var i = 0; i < allWraps.length; i++) {
var iframe = allWraps[i].querySelector('iframe');
if (iframe && iframe.src.indexOf(next.id) !== -1) {
allWraps[i].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
var nextPlayer = new window.Vimeo.Player(iframe);
setTimeout(function () {
nextPlayer.play().catch(function () {});
}, 600);
break;
}
}
} else {
setEnded(true);
}
});
player.on('play', () => {
if (!cancelled) setEnded(false);
});
if (shouldAutoplay) {
player.play().catch(() => {});
}
};
if (!script) {
script = document.createElement('script');
script.src = 'https://player.vimeo.com/api/player.js';
script.async = true;
script.onload = init;
document.head.appendChild(script);
} else if (window.Vimeo) {
setTimeout(init, 100);
} else {
script.addEventListener('load', init);
}
return () => {
cancelled = true;
if (playerRef.current) {
playerRef.current.off('ended');
playerRef.current.off('play');
playerRef.current = null;
}
};
}, [videoId]);
const handleReplay = () => {
if (playerRef.current) {
playerRef.current.setCurrentTime(0);
playerRef.current.play();
}
setEnded(false);
};
return <>
{ended &&
{next ? <>
Up next
{next.title}
{currentIndex + 2} of {PLAYLIST.length}
: <>
Series complete
Nice — you've watched them all
}
Browse all videos
}
;
};
Flinks provides three front-end configuration options:
* Flinks Connect
* Flinks Express
* Custom API Integrations (only available to select clients)
To learn more about the capabilities and requirements for each option, refer to the table below and the following sections.
| FLINKS PRODUCT | CONNECTS CUSTOMERS ACCOUNTS | CUSTOMIZABLE FOR YOUR BRAND | EMBEDDED IN YOUR SITE | CODING WORK REQUIRED |
| :------------- | :-------------------------- | :-------------------------- | :-------------------- | :------------------- |
| Flinks Connect | Yes | Yes | Yes | Yes |
| Flinks Express | Yes | Yes | No | No |
| Custom | Yes | Yes | Yes | Yes |
### Using Flinks Connect
#### Use this solution if:
You want to build the solution directly into your site
or app, and have in-house development resources available to assist.
Flinks Connect is our most popular solution to connect end-user accounts. It supports oAuth 2.0 technology and lives within an iframe that you build into your site. When you choose Flinks Connect, we handle all of the complicated bank processes on your behalf, including multi-factor authentication, edge cases, errors, and more. Any new financial institutions that we support are automatically added to your configuration.
Your customers can be confident that the data they're sharing is safe. Their login credentials are securely stored and are never shared with your servers.
### Using Flinks Express
#### Use this solution if:
You want a fast integration that does not require in-house development resources.
Flinks Express is the fastest way to integrate with us to connect end-user accounts. It's a hosted solution that we manage on your behalf, but design it to look like your website.
It's a template that we fully customize with your branding and logos. We recommend this integration option if you don't have any in-house development resources or do not want to build it into your site.