Add and Configure the Live Experience Widget for your Website

Your customers initiate engagements with your associates by selecting the Oracle Live Experience widget.

Add and configure the widget so that it provides the exact experience you intend to deliver to your customers.

We created an SDK to make this task as simple and straightforward as possible. Take your existing website or web application and extend it to include the Live Experience framework. Then you add the widget and configure the widget on as many web pages as you need.

Download the Live Experience web component SDK and extract it to a folder within your application (for instance, into a folder named lx).
You'll reference the folder name you choose, lx in this example, when you're referencing the widget API.
Add a reference to require.js (included in the SDK) in the <head> element of your HTML file where you reference the folder name you just created, in this case, lx:
```
<head>
 <script type="text/javascript" 
 data-main="lx/js/api-main" 
 src="lx/lib/require.js">
 </script>
</head>
```
The widget uses the require.js library for dependency processing. If your application already uses require.js, there's no need to include it again as shown in the sample above.

Add a require.js <script> element within your page's <body> element:

<script type="text/javascript">
 require(["oracle.live.api"], function(liveApi) {
 });
</script>

Retrieve the authorization JWT by making a request to an authorization module that you've defined (in this case /my_server_path/auth.cgi).
You get the token and the token expiry in the response.
```
<script type="text/javascript">
 require(["oracle.live.api"], function(liveApi) {
 const getAuthToken = (callback) => {
 fetch(new Request("/my_server_path/auth.cgi"))
 .then(response => { return response.json(); })
 .then(auth => { callback(auth.access_token, auth.expires_in); });
 };
 });
</script>
```
For information on deploying a simple authorization module, see Deploy the Sample JWT Script.
Create a getAuthToken function that takes auth token and auth token expiry arguments, which you retrieved from the auth module call above:
```
<script type="text/javascript">
 require(["oracle.live.api"], function(liveApi) {
 const getAuthToken = (callback) => {
 fetch(new Request("/my_server_path/auth.cgi"))
 .then(response => { return response.json(); })
 .then(auth => { callback(auth.access_token, auth.expires_in); });
 };
 getAuthToken((myAuthToken, myTokenExpiry) => {
 });
 });
</script>
```
Note: If the API call to acquire a valid JWT fails, and myAuthToken and myTokenExpiry are undefined, then the browser can be thrown into an indefinite refresh loop until it crashes. Make sure that myAuthToken and myTokenExpiry can't be undefined.
Initialize the following required context attributes:
- userID: the URI for the user initiating the call
- tenantID: your assigned tenant ID
- authToken: the authentication JWT retrieved from your auth module
```
<script type="text/javascript">
 require(["oracle.live.api"], function(liveApi) {
 const getAuthToken = (callback) => {
 fetch(new Request("/my_server_path/auth.cgi"))
 .then(response => { return response.json(); })
 .then(auth => { callback(auth.access_token, auth.expires_in); });
 };
 getAuthToken((myAuthToken, myTokenExpiry) => {
 liveApi.controller.service.userID = "bob@example.com";
 liveApi.controller.service.tenantID = "MyTenant";
 liveApi.controller.service.authToken = myAuthToken;
 });
 });
</script>
```
  Note: When you test the integration of the web widget into your application and make your first call, ensure the initialized userID isn't the same as the email address used to log into the Associate Desktop.

Initialize the authRefresh helper callback to automatically refresh the authentication JWT when required:

<script type="text/javascript">
 require(["oracle.live.api"], function(liveApi) {
 const getAuthToken = (callback) => {
 fetch(new Request("/my_server_path/auth.cgi"))
 .then(response => { return response.json(); })
 .then(auth => { callback(auth.access_token, auth.expires_in); });
 };
 getAuthToken((myAuthToken, myTokenExpiry) => {
 liveApi.controller.service.userID = "bob@example.com";
 liveApi.controller.service.tenantID = "MyTenant";
 liveApi.controller.service.authToken = myAuthToken;
 liveApi.controller.service.authRefresh(myTokenExpiry, () => {
 getAuthToken((jwt) => { 
 liveApi.controller.service.authToken = jwt; });
 });
 });
 });
</script>

What to do next

Next, Configure Context Information for Your Website.