From 7ed6b6a470e50bc4ab11b0abdba6bb82ec732e6a Mon Sep 17 00:00:00 2001 From: Maximilian Neitzel Date: Mon, 27 Jan 2025 12:13:13 +0100 Subject: [PATCH 1/5] feat: integrate cookiepro modal and add skeleton in order to integrate chatbot --- config.json | 2 +- public/js/init.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 public/js/init.js diff --git a/config.json b/config.json index bc241e6e..77629303 100644 --- a/config.json +++ b/config.json @@ -3,7 +3,7 @@ "baseUrl": "https://www.aoe.com/techradar", "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md", "logoFile": "logo.svg", - "jsFile": "", + "jsFile": "js/init.js", "toggles": { "showChart": true, "showTagFilter": true, diff --git a/public/js/init.js b/public/js/init.js new file mode 100644 index 00000000..a687884b --- /dev/null +++ b/public/js/init.js @@ -0,0 +1,46 @@ +(function () { + // load cookiebot script in order to display the cookie modal + const optanonWrapper = document.createElement("script"); + optanonWrapper.type = "text/javascript"; + optanonWrapper.innerHTML = `function OptanonWrapper() { + if(OnetrustActiveGroups.includes('C0003')){ + Chatbot.init({height: 700, width: 400, botName: "TechScout"}) + Chatbot.show(); + } + if(!OnetrustActiveGroups.includes('C0003')){ + Chatbot.hide(); + } + }`; + document.head.prepend(optanonWrapper); + + const cookieBot = document.createElement("script"); + cookieBot.src = "https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js"; + cookieBot.type = "text/javascript"; + cookieBot.setAttribute("data-domain-script", "5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test"); + document.head.prepend(cookieBot); + + const otautoBlock = document.createElement("script"); + otautoBlock.src = "https://cookie-cdn.cookiepro.com/consent/5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test/OtAutoBlock.js"; + otautoBlock.type = "text/javascript"; + document.head.prepend(otautoBlock); + + const chatbotElement = document.createElement("div"); + chatbotElement.id = "chatbot"; + chatbotElement.style= "position: fixed; bottom: 0; right: 0; z-index: 9999; margin-right: 0; margin-bottom: 20px"; + document.body.append(chatbotElement); + + // initially load chatbot script + const chatbot = document.createElement("script"); + // TODO: add public source to js file + chatbot.src=""; + chatbot.type = "text/javascript"; + document.head.append(chatbot); + + // load chatbot styles + const chatbotStyles = document.createElement("link"); + chatbotStyles.rel = "stylesheet"; + // TODO: add public source to css file + chatbotStyles.href = ""; + document.head.append(chatbot); +}) +(); From e8063901b55ac01c9f0a384804d5a83f331035f5 Mon Sep 17 00:00:00 2001 From: Maximilian Neitzel Date: Mon, 27 Jan 2025 15:13:37 +0100 Subject: [PATCH 2/5] add comments --- public/js/init.js | 72 ++++++++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/public/js/init.js b/public/js/init.js index a687884b..8f58008c 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -1,8 +1,8 @@ (function () { - // load cookiebot script in order to display the cookie modal - const optanonWrapper = document.createElement("script"); - optanonWrapper.type = "text/javascript"; - optanonWrapper.innerHTML = `function OptanonWrapper() { + // load cookiebot script in order to display the cookie modal + const optanonWrapper = document.createElement("script"); + optanonWrapper.type = "text/javascript"; + optanonWrapper.innerHTML = `function OptanonWrapper() { if(OnetrustActiveGroups.includes('C0003')){ Chatbot.init({height: 700, width: 400, botName: "TechScout"}) Chatbot.show(); @@ -11,36 +11,44 @@ Chatbot.hide(); } }`; - document.head.prepend(optanonWrapper); - const cookieBot = document.createElement("script"); - cookieBot.src = "https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js"; - cookieBot.type = "text/javascript"; - cookieBot.setAttribute("data-domain-script", "5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test"); - document.head.prepend(cookieBot); + document.head.prepend(optanonWrapper); - const otautoBlock = document.createElement("script"); - otautoBlock.src = "https://cookie-cdn.cookiepro.com/consent/5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test/OtAutoBlock.js"; - otautoBlock.type = "text/javascript"; - document.head.prepend(otautoBlock); + const cookieBot = document.createElement("script"); + cookieBot.src = + "https://cookie-cdn.cookiepro.com/scripttemplates/otSDKStub.js"; + cookieBot.type = "text/javascript"; + // use -test as a suffix (e.g. 5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test) to test the cookie modal locally + cookieBot.setAttribute( + "data-domain-script", + "5e32d393-d56f-4dae-9f9b-9f4d4931c5f4" + ); + document.head.prepend(cookieBot); - const chatbotElement = document.createElement("div"); - chatbotElement.id = "chatbot"; - chatbotElement.style= "position: fixed; bottom: 0; right: 0; z-index: 9999; margin-right: 0; margin-bottom: 20px"; - document.body.append(chatbotElement); + const otautoBlock = document.createElement("script"); + // use -test as a suffix (e.g. 5e32d393-d56f-4dae-9f9b-9f4d4931c5f4-test) to test the cookie modal locally + otautoBlock.src = + "https://cookie-cdn.cookiepro.com/consent/5e32d393-d56f-4dae-9f9b-9f4d4931c5f4/OtAutoBlock.js"; + otautoBlock.type = "text/javascript"; + document.head.prepend(otautoBlock); - // initially load chatbot script - const chatbot = document.createElement("script"); - // TODO: add public source to js file - chatbot.src=""; - chatbot.type = "text/javascript"; - document.head.append(chatbot); + const chatbotElement = document.createElement("div"); + chatbotElement.id = "chatbot"; + chatbotElement.style = + "position: fixed; bottom: 0; right: 0; z-index: 9999; margin-right: 0; margin-bottom: 20px"; + document.body.append(chatbotElement); - // load chatbot styles - const chatbotStyles = document.createElement("link"); - chatbotStyles.rel = "stylesheet"; - // TODO: add public source to css file - chatbotStyles.href = ""; - document.head.append(chatbot); -}) -(); + // initially load chatbot script + const chatbot = document.createElement("script"); + // TODO: add public source to js file + chatbot.src = ""; + chatbot.type = "text/javascript"; + document.head.append(chatbot); + + // load chatbot styles + const chatbotStyles = document.createElement("link"); + chatbotStyles.rel = "stylesheet"; + // TODO: add public source to css file + chatbotStyles.href = ""; + document.head.append(chatbot); +})(); From 9486a8f89125aef5548f6ecd6361fb8443135792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karsten=20K=C3=B6hler?= Date: Wed, 29 Jan 2025 13:51:55 +0100 Subject: [PATCH 3/5] add src for chatbot-frontend --- public/js/init.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/js/init.js b/public/js/init.js index 8f58008c..03fc7773 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -40,8 +40,7 @@ // initially load chatbot script const chatbot = document.createElement("script"); - // TODO: add public source to js file - chatbot.src = ""; + chatbot.src = "/chatbot-frontend/chatbot.umd.js"; chatbot.type = "text/javascript"; document.head.append(chatbot); From 977a417dd9a0fc96906496c562b11d12683b2e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karsten=20K=C3=B6hler?= Date: Thu, 30 Jan 2025 14:34:49 +0100 Subject: [PATCH 4/5] add styles for chatbot-frontend --- public/js/init.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/js/init.js b/public/js/init.js index 03fc7773..f78b3320 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -47,7 +47,6 @@ // load chatbot styles const chatbotStyles = document.createElement("link"); chatbotStyles.rel = "stylesheet"; - // TODO: add public source to css file - chatbotStyles.href = ""; + chatbotStyles.href = "/chatbot-frontend/style.css"; document.head.append(chatbot); })(); From 15835806577a711ed75d9a0649c60e03be7f0f1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karsten=20K=C3=B6hler?= Date: Fri, 31 Jan 2025 13:25:42 +0100 Subject: [PATCH 5/5] fix typo for chatbot styles --- public/js/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/init.js b/public/js/init.js index f78b3320..74a08f7a 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -48,5 +48,5 @@ const chatbotStyles = document.createElement("link"); chatbotStyles.rel = "stylesheet"; chatbotStyles.href = "/chatbot-frontend/style.css"; - document.head.append(chatbot); + document.head.append(chatbotStyles); })();