# Javascript-Widget
{% hint style="success" %}
We recommend this method because it is the most efficient way to integrate the highly complex flow of providing a seamless interaction between the customer and the bank.
{% endhint %}
## Overview
The JavaScript-Widget (JS-Widget) is a complete implementation of the user-facing process during an XS2A transaction. The user-facing process consists of multiple steps that occur in various orders:
* Selecting the bank
* Providing credentials for the login to the bank
* Selecting the TAN procedure and medium if required
* Redirecting the user to the bank if required
The exact process varies from bank to bank and from user to user.
The Javascript-Widget encapsulates these steps into a single, encapsulated, and highly customizable piece of software that can be seamlessly integrated into any webpage.
Embedding is done with very few lines of code.
## How to use
To use our Javascript-Widget the first thing to do is to include the Javascript and base CSS files into your integration.
### Including the Widget into your integration
Include `xs2a.js` in your page:
{% tabs %}
{% tab title="Example" %}
```markup
XS2A Example
```
{% endtab %}
{% tab title="Javascript" %}
```markup
```
{% endtab %}
{% endtabs %}
### Include a container for the Widget
The Widget will render all needed steps in the process itself. It needs a container in the DOM where this should be done.
You need a wizard session key to initialize the widget. This key holds the configuration for the session you want to display to the user.
Please read one of the following guides to get a wizard session key:
{% content-ref url="../platforms/pay" %}
[pay](https://guide.xs2a.com/xs2a/integration-cs/platforms/pay)
{% endcontent-ref %}
{% content-ref url="../platforms/risk" %}
[risk](https://guide.xs2a.com/xs2a/integration-cs/platforms/risk)
{% endcontent-ref %}
{% content-ref url="../platforms/api" %}
[api](https://guide.xs2a.com/xs2a/integration-cs/platforms/api)
{% endcontent-ref %}
After you received a wizard session key from our API you can initialize the widget.
{% tabs %}
{% tab title="Example" %}
```markup
XS2A Example
```
{% endtab %}
{% endtabs %}
You need to replace `your-wizard-session-key-here` with your real key received by our API.
### Start the Widget
The Widget is now able to start, to do so we need to initialize it. There are two mandatory callbacks to register `finish()` and `abort()`.
For more information about the initialization, the callbacks or configuration of the widget please read our technical API documentation.
{% content-ref url="../getting-started/api-documentation" %}
[api-documentation](https://guide.xs2a.com/xs2a/integration-cs/getting-started/api-documentation)
{% endcontent-ref %}
{% tabs %}
{% tab title="Example" %}
```markup
XS2A Example
```
{% endtab %}
{% tab title="Javascript" %}
```javascript
// Loads the xs2a_base.css file.
xs2a.useBaseStyles();
xs2a.finish(() => {
// Called when the session is finished
document.location.href = 'your-success-link';
});
xs2a.abort(() => {
// Called when the session is aborted
document.location.href = 'your-abort-link';
});
// Start the wizard
xs2a.init();
```
{% endtab %}
{% endtabs %}
### Receiving errors
It is important to register the error callback as well as the mandatory ones. In this callback, you will receive information about occurring errors during the session. You can store these errors in your system or react to them with special behavior.
Be sure you register this callback before the init call.
{% tabs %}
{% tab title="Javascript" %}
```javascript
xs2a.error((errorCode, messages, recoverable) => {
console.error(errorCode, messages, recoverable);
});
```
{% endtab %}
{% endtabs %}
### Result
The Widget will now initialize and generates the needed steps itself.
## Styling
The widget generates HTML DOM Elements that can be styled with normal CSS rules. You can look into our default `xs2a_base.css` file for all variables as a reference or generate a set of rules fully based on your needs.
{% tabs %}
{% tab title="Example" %}
```css
:root {
--xs2a-primary: blue;
--xs2a-error: red;
--xs2a-warning: yellow;
/* other overwrites, see top of xs2a_base.css file for all variables */
}
```
{% endtab %}
{% endtabs %}
As long as there are no legal problems due to hiding our logo or similar everything can be styled to match the look of the page the widget is embedded to.
In case you run into CSP-related issues or the like with `xs2a.useBaseStyles()`, you can manually include the `xs2a_base.css`:
```
```