|
- <html>
- <head>
- <style>
- /* Some miscellenous widget manipulation */
- .rw-launcher {
- -webkit-animation-delay: 0;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-name: slide-in;
- -webkit-animation-fill-mode: forwards;
- -moz-animation-delay: 0;
- -moz-animation-duration: 0.5s;
- -moz-animation-name: slide-in;
- -moz-animation-fill-mode: forwards;
- animation-delay: 0;
- animation-duration: 0.5s;
- animation-name: slide-in;
- animation-fill-mode: forwards;
- display: flex;
- align-items: center !important;
- justify-content: center;
- background-color: white !important;
- border: 0 !important;
- box-shadow: 0 2px 10px 1px white!important;
- height: 125px !important;
- margin: 0;
- width: 125px !important;
- box-sizing:border-box
- }
- /* Resizing the widget */
- .rw-launcher img {
- width: 125 !important;
- max-height: 125 !important;
- object-fit: contain !important;
- }
- /* Getting rid of the rotation animation of the widget while closing */
- .rw-close-launcher {
- -webkit-animation-delay: 0;
- -webkit-animation-duration: 0s !important;
- -webkit-animation-name: rotation-lr !important;
- -webkit-animation-fill-mode: forwards;
- -moz-animation-delay: 0;
- -moz-animation-duration: 0s !important;
- -moz-animation-name: rotation-lr !important;
- -moz-animation-fill-mode: forwards;
- animation-delay: 0;
- animation-duration: 0s !important;
- animation-name: rotation-lr !important;
- animation-fill-mode: forwards;
- }
-
- /* Getting rid of the rotation animation of the widget while opening */
- .rw-open-launcher {
- -webkit-animation-delay: 0;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-name: rotation-rl;
- -webkit-animation-fill-mode: forwards;
- -moz-animation-delay: 0;
- -moz-animation-duration: .5s;
- -moz-animation-name: rotation-rl;
- -moz-animation-fill-mode: forwards;
- animation-delay: 0;
- animation-duration: 0s !important;
- animation-name: rotation-rl;
- animation-fill-mode: forwards;
- }
- </style>
- </head>
- <body>
- <style>
- /* Background color for the header */
- .rw-conversation-container .rw-header{background-color: #233e80;}
- /* Correction of the shadow for the chat window */
- .rw-conversation-container {
- -webkit-animation-delay: 0;
- -webkit-animation-duration: .5s;
- -webkit-animation-name: slide-in;
- -webkit-animation-fill-mode: forwards;
- -moz-animation-delay: 0;
- -moz-animation-duration: .5s;
- -moz-animation-name: slide-in;
- -moz-animation-fill-mode: forwards;
- animation-delay: 0;
- animation-duration: .5s;
- animation-name: slide-in;
- animation-fill-mode: forwards;
- border-radius: 10px;
- box-shadow: 0px -20px 12px 0px hsl(0deg 14% 89% / 0%), inset 4px -7px 3.7px -1px rgb(0 0 0 / 7%), 0 5px 7px -1px hsl(0deg 0% 0% / 9%), 2px -8px 12.5px -1px rgb(84 25 25 / 10%), 2px -6px 23.4px 0px rgb(255 0 0 / 12%), inset -3px -5px 56px 0px rgb(237 0 0 / 17%);
- overflow: hidden;
- width: 370px;
- }
- /* Resizing avatar (to the left of replies) */
- .rw-conversation-container .rw-avatar {
- width: 55px;
- height: 55px;
- border-radius: 100%;
- margin-right: -3px;
- /* position: relative; */
- bottom: 0px;
- }
- /* Positioning the avatar to the left of replies rather than at the top*/
- .rw-conversation-container .rw-message {
- margin: 10px;
- font-size: 16px;
- line-height: 20px;
- display: flex;
- font-family: Inter,sans-serif;
- flex-wrap: unset !important;
- position: relative;
- }
- /* Header avatar resizing */
- .rw-conversation-container .rw-header .rw-avatar {
- all: initial;
- height: 57px;
- width: 57px;
- position: absolute;
- top: 4px;
- left: 0px;
- }
- /* Color box for buttons (payload) */
- .rw-conversation-container .rw-reply {
- -webkit-transition: box-shadow .3s ease,top .3s ease;
- -moz-transition: box-shadow .3s ease,top .3s ease;
- -o-transition: box-shadow .3s ease,top .3s ease;
- transition: box-shadow .3s ease,top .3s ease;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- background-color: #fafafa;
- border: 1px solid #135afe;
- border-radius: 15px;
- color: #233e80;
- padding: 4px 8px;
- max-width: 215px;
- min-height: 1.7em;
- font-weight: 500;
- text-align: center;
- font-family: Inter,sans-serif;
- cursor: pointer;
- margin: 0.25em;
- text-decoration: unset;
- box-shadow: unset !important/*0 .2px .7px -7pxrgba(0,0,0,.277),0 .5px 1.8px -7pxrgba(0,0,0,.369),0 1.2px 3.8px -7pxrgba(0,0,0,.442),0 4px 13px -7pxrgba(0,0,0,.64);*/
- }
- </style>
- <script>
- // For Device information (Desktop or Mobile)
- device = ""
- let details = navigator.userAgent;
-
- /* Creating a regular expression
- containing some mobile devices keywords
- to search it in details string*/
- let regexp = /android|iphone|kindle|ipad/i;
-
- /* Using test() method to search regexp in details
- it returns boolean value*/
- let isMobileDevice = regexp.test(details);
-
- if (isMobileDevice) {
- device = "Mobile";
- } else {
- device = "Desktop";
- }
-
-
-
- // For Browser information
- navigator.saysWho = (() => {
- const { userAgent } = navigator
- let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
- let temp
-
- if (/trident/i.test(match[1])) {
- temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []
-
- return `IE ${temp[1] || ''}`
- }
-
- if (match[1] === 'Chrome') {
- temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)
-
- if (temp !== null) {
- return temp.slice(1).join(' ').replace('OPR', 'Opera')
- }
-
- temp = userAgent.match(/\b(Edg)\/(\d+)/)
-
- if (temp !== null) {
- return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
- }
- }
-
- match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?']
- temp = userAgent.match(/version\/(\d+)/i)
-
- if (temp !== null) {
- match.splice(1, 1, temp[1])
- }
-
- return match.join(' ')
- })()
-
- browser = navigator.saysWho // outputs: `Chrome 89
- device_and_browser = device.concat(",", browser);
- </script>
- <script>!(function () {
- let e = document.createElement("script"),
- t = document.head || document.getElementsByTagName("head")[0];
- (e.src =
- "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
- // Replace 1.x.x with the version that you want
- (e.async = !0),
- (e.onload = () => {
- window.localStorage.clear()
- window.WebChat.default(
- {
- showCloseButton: false,
- showFullScreenButton: true,
- initPayload: ['/greet{"device_and_browser": "', device_and_browser, '"}'].join(''),
- customData: { language: "en" },
- socketUrl: "http://localhost:5005",
- profileAvatar: "./assets/bot_widget-removebg-preview.png",
- openLauncherImage: "./assets/robo_small.gif",
- closeImage: "./assets/closebutton.jpg",
- title: "PM-KUSUM",
- inputTextFieldHint: "Start a conversation",
- connectingText: 'Waiting for server...'
- // add other props here
- },
- null
- );
- }),
- t.insertBefore(e, t.firstChild);
- })();
- </script>
- </body>
- </html>
|