MyAccount Widget Testseite

Installation

Include CSS and JavaScript files. The Account Widget depends on jQuery (2.1.1+) and Select2 (4.0.3+, full version).

<script src="YOUR-FOLDER/jquery.js"></script>
<script src="YOUR-FOLDER/select2.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="YOUR-FOLDER/select2.min.css"/>
<link rel="stylesheet" type="text/css" href="https://myaccount.messefrankfurt.com/accountwidget/2.0/component.css?nocache=" />
<script src="https://myaccount.messefrankfurt.com/accountwidget/2.0/accountwidget.js?nocache="></script>

Note: Add an always changing value to nocache to prevent caching problems in older IE browsers.

Include fonts Roboto-Light and Roboto-Regular from your file system and define them with @font-face

<style>
	@font-face {
	    font-family: 'Roboto-Regular';
	    font-style: normal;
	    font-weight: 400;
	    src: url("YOUR-FOLDER/roboto-regular-webfont.eot");
	    src: url("YOUR-FOLDER/roboto-regular-webfont.eot#iefix") format("embedded-opentype"),
	        url("YOUR-FOLDER/roboto-regular-webfont.woff") format("woff"),
	        url("YOUR-FOLDER/roboto-regular-webfont.ttf") format("truetype"),
	        url("YOUR-FOLDER/roboto-regular-webfont.svg#roboto-regular-webfont") format("svg");
	    text-rendering: optimizeLegibility;
	}
	
	@font-face {
	    font-family: 'Roboto-Light';
	    font-style: normal;
	    font-weight: 300;
	    src: url("YOUR-FOLDER/roboto-light-webfont.eot");
	    src: url("YOUR-FOLDER/roboto-light-webfont.eot#iefix") format("embedded-opentype"), 
	        url("YOUR-FOLDER/roboto-light-webfont.woff") format("woff"), 
	        url("YOUR-FOLDER/roboto-light-webfont.ttf") format("truetype"),
	        url("YOUR-FOLDER/roboto-light-webfont.svg#roboto-light-webfont") format("svg");
	    text-rendering: optimizeLegibility;
	}
</style>

Initialize Account-Widget after page load with your parameters

var accountWidget = new MyAccountWidget({
    applicationId: 'MF-APP-0MYACC',
    referrer: this.location.href,
    language:'de'
});

See Options for other parameters.

Define a container element where the widget slides in
```
<body id="body">
```
and the Account-Widget box to show the current login state with a profile image
```
<div id="account-widget"></div>
```
Pass the container element and Account-Widget box to the render method
```
accountWidget.render('#body', '#account-widget');
```

Options

The following parameters can be set when initializing the Account-Widget.

or here for MyAccount version 2.

Parameter	Type	Required	Description
applicationId	String	required	ID of your application
eventNumber	String	optional	MED event number of a fair event (year independend).
forwardingUrl	String	optional	URL to go to after login or registration in MyAccount after the user went there via "Register" or "Forgot password?".
myAccountVersion	Number: `1` or `2`	optional	The Account Widget links to MyAccount profile page 1.0 or 2.0
onLogin	void function()	optional	Function to be executed after successful login or on page load when user is already logged in.
onLogout	void function()	optional	Function to be executed after successfully logging out or on page load when user is already logged out.
openWidget	Boolean	optional	Renders widget with open side bar
referrer	String	optional	URL for back links in MyAccount after the user went there via "Register" or "Forgot password?".
referrerName	String	optional	optional text to be displayed as title in MyAccount
language	String: `de`, `en`, `en_us`, `fr`, `zh`, `zh_tw`	optional	Language code for showing the correct translation

Additional for MyAccount 2.0

If myAccountVersion is 2 you can use the following parameters.

Parameter	Type	Required	Description
color	String (hex)	optional	Optional hex color for coloring MyAccount and the side bar (e.g. `FF00FF`). Overwrites default color of given fair event.
myaCampaignId	String	optional	Used to determinate the right registration configuration.
registrationConfigId	String	optional	Optional ID of form configuration for registration in MyAccount
subsidiaryId	String	required	ID of the subsidiary.

Methods

void changeLanguage(String language): Change language and rerender. Language can be de, en, en_us, fr, zh or zh_tw
Promise getAccountData(): Returns a promise to fetch the account data of the user who is currently logged in. Consult the IDP API here and here for the returned JSON object of MyAccount version 1 or here for MyAccount version 2.
void open(): Opens the widget (side bar)
void render(Selector containerElement, Selector infoBoxElement): Renders Account-Widget's side bar and box into the given container elements.
void toggleWidget(): Opens widget if closed or closes widget if open.
Boolean widgetIsOpen(): Returns true, when the widget is open. Otherwise false.

Account Widget Documentation

Installation

Options

Additional for MyAccount 2.0

Methods