liveperson/frontend/views/home.ejs (141 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Agent Assist UI Modules</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:medium"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Google+Sans:medium"
rel="stylesheet"
/>
<style>
.authenticate-message {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #333;
}
</style>
<!-- WebComponents polyfill. Needed for rendering web components in older browsers. -->
<script src="https://www.gstatic.com/external_hosted/document_register_element/document-register-element.js"></script>
<!-- Core UI module container. Loads all UI module-specific scripts. -->
<script src="https://www.gstatic.com/agent-assist-ui-modules/container.js"></script>
</head>
<body>
<script>
window.addEventListener('load', function () {
fetch('/auth', {
headers: [['Content-Type', 'application/json']],
})
.then(function (res) {
var status = res.status;
return res.json().then(function (data) {
if (status !== 200) {
throw { data, status };
}
return data;
});
})
.then(function (data) {
var proxyServer = data.proxyServer;
var state = data.state;
var accessToken = data.accessToken;
var refreshToken = data.refreshToken;
var uiModulesEl = document.createElement('agent-assist-ui-modules');
var attributes = [
['agent-desktop', 'LivePerson'],
['features', state.features],
['conversation-profile', state.conversationProfile],
['auth-token', accessToken],
['use-custom-conversation-id', 'true'],
['custom-api-endpoint', proxyServer],
];
for (var [attribute, value] of attributes) {
uiModulesEl.setAttribute(attribute, value);
}
// Add additional configuration here.
uiModulesEl.config = {};
document.body.appendChild(uiModulesEl);
setInterval(refreshAuthToken, 60000 * 5);
window.addEventListener(
'aa-dialogflow-api-authentication-error',
refreshAuthToken
);
async function refreshAuthToken() {
return fetch(`${proxyServer}/auth/refresh`, {
method: 'POST',
headers: [['Content-Type', 'application/json']],
body: JSON.stringify({ refreshToken }),
})
.then(function (res) {
return res.json();
})
.then(function (response) {
if (response && response.accessToken) {
refreshToken = response.refreshToken;
var uiModulesEl = document.querySelector(
'agent-assist-ui-modules'
);
uiModulesEl.setAttribute(
'auth-token',
response.accessToken
);
} else {
initiateAuthFlow();
}
})
.catch(function () {
initiateAuthFlow();
});
}
function initiateAuthFlow() {
var authenticateMessageClassName = 'authenticate-message';
var authenticateMessageEl = document.querySelector(
'.' + authenticateMessageClassName
);
if (!authenticateMessageEl) {
var uiModulesEl = document.querySelector(
'agent-assist-ui-modules'
);
if (uiModulesEl) {
uiModulesEl.remove();
}
var p = document.createElement('p');
p.innerText =
'Session expired. Please reload window to sign in.';
p.classList.add(authenticateMessageClassName);
document.body.appendChild(p);
}
}
})
.catch(err => {
if (err.status === 401) {
// Redirect to auth entrypoint if authorization code could not be verified.
window.location.href = err.data.authEntryPoint;
} else {
handle500AuthResponse(err);
}
});
});
function handle500AuthResponse(err) {
var p = document.createElement('p');
p.innerText = 'Could not authenticate agent. ' + err.data.error;
document.body.appendChild(p);
if (err.data.authEntryPoint) {
var button = document.createElement('button');
button.innerText = 'Try again';
button.addEventListener('click', function () {
window.location.href = err.data.authEntryPoint;
});
document.body.appendChild(button);
}
}
</script>
</body>
</html>