Embed the EDDIE Button in your application

To use the EDDIE Button in an eligible party application, the EP application has to include the button in its HTML page. It can be integrated into a frontend based application (e.g. a single-page application) or into a server rendered web application as it's implemented using standard HTML custom elements.

<script
  type="module"
  src="${eddieUrl}/lib/eddie-components.js"></script>
<!-- ... -->
<eddie-connect-button
  connection-id="1"
  data-need-id="9bd0668f-cc19-40a8-99db-dc2cb2802b17"
></eddie-connect-button>

${eddieUrl} is to be replaced with the public base URL of your EDDIE instance.

The eddie-connect-button element can be configured using the following attributes:

Attribute	Type	Description
connection-id (required)	String	The connection id is generated by the EP application integrating EDDIE and is used to identify generated requests.
data-need-id (required)	String	ID of a pre-configured data need.
core-url	String	Sets a fixed URL to the EDDIE Core.
permission-administrator	String	Sets a fixed permission administrator to use by its id.
accounting-point-id	String	Sets a fixed accounting point id for permission administrators that require it.
customer-identification	String	Sets a fixed customer identification for permission administrators that require it.
remember-permission-administrator	Boolean	If true, the most recent permission administrator is stored and loaded from local storage.

The connection-id has to be generated by the EP application. It's included in the messages sent by EDDIE so that button instance can match with the data stream that is created using it. The EP application is also responsible for storing previous connection IDs and linking them to the users of the EP application. Each connection id must be used only once to create a uniquely identifiable connection with EDDIE.

The following pages may help integrate the EDDIE Button in your favorite framework:

• Angular

Request status and interaction events

The EDDIE button fires events to inform the EP application about the status of the user interaction, and the status of the permission request. These events can be listened to by the EP application to update the UI or to trigger further actions.

Permission request states are described in integrating. To match the naming of event and attribute names common in HTML and JavaScript, the status names are converted to lowercase and hyphens are used as separators. Event handler attributes also have the hyphens removed. For example, the status UNABLE_TO_SEND is converted to unable-to-send for events and onunabletosend for the event handler attribute.

IMPORTANT

Please note that status events on the client side are not a reliable source of information about the status of the permission request!

Event listeners

Permission state events work as standard HTML events and can be listened to using the addEventListener method.

const button = document.querySelector("eddie-connect-button");
button.addEventListener("eddie-dialog-open", () => {
  console.log("Dialog opened");
});

Event	Description
eddie-dialog-open	Dispatched when the dialog is opened.
eddie-dialog-close	Dispatched when the dialog is closed.
eddie-request-status	Dispatched when the status of the permission request changes. The event detail contains the new status.
eddie-request-{status}	In addition to eddie-request-status, an event with the name of the request status is dispatched. For example, eddie-request-created.

Callback attributes

The button can also be passed callback functions to react to user interaction and status change events. The callback function has to be defined in the global scope and is passed as a string attribute to the button.

Attribute	Called when ...
onopen	The dialog is opened (the button is pressed).
onclose	The dialog is closed.
onstatuschange	The status of the permission request has changed. event.detail.status contains the new status.
oncreated	The permission request has been created. event.detail.location contains an endpoint to query the current status from.
on{status}	The status of the permission request has changed to {status}. Where {status} is in lowercase letters. For example, onaccepted, onrejected

TIP

The name of the attribute is case-insensitive, so they can be cased for better readability.

<eddie-connect-button
  ...
  onopen="console.log('Dialog opened')"
  onclose="console.log('Dialog closed')"
  onstatuschange="handleStatusChange(event)"
  oncreated="console.log('Permission request created')"
  onaccepted="console.log('Permission request accepted')"
  onrejected="console.log('Permission request rejected')"
></eddie-connect-button>

Controlling the EDDIE button programmatically

The EDDIE button exposes methods to control its behavior programmatically.

• openDialog(): Opens the dialog. Similar to clicking the button.
• closeDialog(): Closes the dialog, keeping the button in its current state.
• reset(): Resets the button to its initial state and closes the dialog if it is already open.

const button = document.querySelector("eddie-connect-button");
button.openDialog();
button.reset();
button.closeDialog();

Please use with care! Closing or resetting the button programmatically can lead to unexpected behavior or break the user experience if the user is still interacting with the button. Similarly, opening the dialog programmatically can be seen as intrusive and should be used with caution.