In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Launches the test runner and displays code coverage
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Bundles the app into a single bundle named widget_bundle.js for easy embedding
Snippet can be embedded to any site using the following html:
<div id="byk-va"></div>
<script>
window._env_ = {
RUUTER_API_URL: 'LOCATION_OF_RUUTER',
NOTIFICATION_NODE_URL: 'Notification Node Server Url'
ENVIRONMENT: 'development', // 'developement | production'
TIM_AUTHENTICATION_URL: 'TIM url with callback parameter',
OFFICE_HOURS: {
TIMEZONE: 'Europe/Tallinn',
BEGIN: 8,
END: 17,
DAYS: [1, 2, 4, 5],
},
ENABLE_HIDDEN_FEATURES: 'FALSE',
IFRAME_TARGET_OIRGIN: "*",
FEEDBACK_RATING_COLORS_ENABLED: 'FALSE',
ENABLE_MULTI_DOMAIN: 'FALSE',
TERMINATION_TIMEOUT: 10,
WIDGET_HEIGHT: 450;
WIDGET_WIDTH: 400;
STREAM_TYPING_SPEED: 30,
FALLBACK_LANGUAGE: 'et',
other variables...
};
</script>
<script id="script-bundle" type="text/javascript" src="LOCATION_OF_WIDGET_BUNDLE" crossorigin=""></script>
If you want to use the widget inside an Iframe use the following snippet or reference iframe-index.html
<body>
<iframe
title="YOUR_IFRAME_TITLE"
id="YOUR_IFRAME_ID"
width="0"
height="0"
src="WIDGET_DOMAIN_URL"
scrolling="no"
style="YOUR_STYLE"
></iframe>
<script>
window.addEventListener(
"message",
(e) => {
const isOpened = e.data.isOpened;
const isFullScreen = e.data.isFullScreen;
if (isOpened != undefined) {
const iframe = window.document.getElementById("byk-widget-iframe");
const checkWidth = isOpened ? "430" : "270";
const checkHeight = isOpened ? "480" : "120";
iframe.width = isFullScreen ? window.innerWidth : checkWidth;
iframe.height = isFullScreen ? window.innerHeight : checkHeight;
}
},
false
);
</script>
</body>
RUUTER_API_URL: Location of newer back end for fetching dataNOTIFICATION_NODE_URL: Location of the notification node server, used for SSE connections and termination queue callsENVIRONMENT:'development'or'production'TIM_AUTHENTICATION_URL: Link to authenticate userORGANIZATION_NAME: Name of the organization using the widgetTERMS_AND_CONDITIONS_LINK: Link opened when the user clicks the terms and conditions buttonOFFICE_HOURS: If this variable is added, widget will be hidden when not in defined work hours. If this variable is not added, the widget will always be displayedENABLED: Whether office hours restrictions are enforcedTIMEZONE: Used for comparing the following variables against a specific timezone.BEGIN: Beginning of office hours. If current time is before this hour (24H), the widget will not be displayedEND: End of office hours. If current time is after this hour (24H), the widget will not be displayedDAYS: List of days in numbers, where 1=monday, 2=tuesday, 3=wednesday... If current day is in the list of days, the widget will be displayed according to BEGIN and END times.
ENABLE_HIDDEN_FEATURES: set it to'TRUE'will show experimental features,'FALSE'will hide themFEEDBACK_RATING_COLORS_ENABLED: set it to'TRUE'to show colors on the NPS/feedback rating widget,'FALSE'to hide themENABLE_MULTI_DOMAIN: set it to'TRUE'to append the current page's domain to multi-domain related requests,'FALSE'to disableTERMINATION_TIMEOUT: Timeout (in seconds) sent to the notification node when queuing a chat for terminationWIDGET_HEIGHT: Default height (in pixels) of the chat windowWIDGET_WIDTH: Default width (in pixels) of the chat windowSTREAM_TYPING_SPEED: Delay (in milliseconds) between characters when streaming LLM responses - lower is fasterIFRAME_TARGET_OIRGIN: Target origin used when posting messages to the parent window (e.g. widget open/full-screen state)SMAX_INTEGRATION: { enabled: true; } -- For SMAX integration. Default is false.FALLBACK_LANGUAGE: Language used when a translation is missing for the current locale. Default is'et'.
See licence here.