// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: ‘#FFEBEE’,
bubbleFromUserBackground: ‘#F3E5F5’,
rootHeight: ‘100%’,
rootWidth: ‘50%’,
backgroundColor: ‘#FAFAFA’,
});
// Change font family and weight.
styleSet.textContent = {
…styleSet.textContent,
fontFamily: “‘Lucida Console’, ‘Courier New’, monospace”,
fontWeight: ‘normal’
};
// Welcome messege
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === ‘DIRECT_LINE/CONNECT_FULFILLED’) {
dispatch({
type: ‘WEB_CHAT/SEND_EVENT’,
payload: {
name: ‘webchat/join’,
value: { language: window.navigator.language }
}
});
}
return next(action);
});
// Set the avatar options.
const avatarOptions = {
//botAvatarImage: ‘https://img.icons8.com/ios/452/artificial-intelligence.png’,
botAvatarInitials: ‘BOV’,
//userAvatarImage: ”,
//userAvatarInitials: ‘WW’
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: ‘PpPAqvRTZSE.h27HAs4iuTDhQemPuzenETlvJisRe8Pg0q1Dwmeu4Z4’
}),
styleSet,
store,
styleOptions: avatarOptions
}, document.getElementById(‘webchat’));