Possibility to configure Bürokratt's chat widget behavior and appearance

[rasmusei]

AS AN Administrator I WANT TO be able to configure Bürokratt's chat widget behavior and appearance SO THAT Bürokratt's chat widget is more visible for End Users

Acceptance Criteria

• [x] Under "haldus" Administrator can change time when widget becomes proactive, by default 3 seconds
• [x] When proactive, Bürokratt "jumps" and wiggles visually
• [x] Under "haldus" Administrator can change time when widget displays message, by default 5 seconds
• [x] Bürokratt's greeting message bubble is displayed next to the chat trigger button (chat widget is not open, message appears next to the icon). Message text: "Küsi minult!"
• [x] Administrator can change Bürokratt's greeting message bubble text
• [x] Administrator can change Bürokratt's color (appearance), color palette and RGB options are displayed
• [x] Before applying changes, preview is shown

GUI

• [ ] According to Figma design
• [ ] REST request to apply changes

When clicking on Preview button, show End User's Chat Widget preview possibly with

• [ ] new color(s)
• [ ] a new greeting message
• [ ] wiggling Bürokratt's icon chosen from https://codepen.io/jeryj/pen/LzPjdJ within Shockwave, Jump and Wiggle

[PaulaMerle]

If possible, also option to remove the widget from the web page should be added to admin.

[rasmusei]

Should be possible to activate/deactivate proactivity

[janaliiv]

Added the following Ruuter endpoints:

Public Ruuter: GET /cs-get-emergency-notice

Private Ruuter: GET /cs-get-emergency-notice POST /cs-set-emergency-notice

Example queries (replace URL and customJwtCookie with appropriate values if needed):

curl --location --request POST 'http://localhost:9091/cs-set-widget-config' \
--header 'Cookie: customJwtCookie=eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIiLCJmaXJzdE5hbWUiOiJtYXJ5IiwibGFzdE5hbWUiOiJtYXJ5IiwiaWRDb2RlIjoiRUU2MDAwMTAxOTkwNiIsImRpc3BsYXlOYW1lIjoibWFyeSIsImlzcyI6ImJ5ay5idWVyb2tyYXR0LmVlIiwiZXhwIjoxNjcwNDIzNTE2LCJsb2dpbiI6Im1hcnkiLCJpYXQiOjE2NzA0MTYzMTYsImp0aSI6IjUzZmViM2I0LWM0NTgtNGZiOC1hMmEyLTA2NzU0ZGQzYWNkZSIsImF1dGhvcml0aWVzIjpbIlJPTEVfQURNSU5JU1RSQVRPUiJdfQ.lmod2v_UmMmCxjx-Qjsv35OgwdAMWKha-cM_tejP4O5qFrMLoahUrnWxjk4rBzyI9y_4VegfPbC8nMg82QhDcGyH78N5gz2T_zatdYJZ0Ium_qD8QSyMDic2W38a0kW3Ksb4M_wiiaNSfk3vh829dvpcal0f6u2VI5Zb7iRbp3SVKkRKuhQssvQ42cyvNcw9fE8avDAwet1gBD7Ag82faHdHzWt1esDHC5aVDrUoofuAnNjACMMP3ZYLaPFOyu_hwTUHCQzDu1JUyoSzU5RmnQdFlkB0yGAyQ5dG1MYLuHDXiWlnR0cZ8huEpcIOyAPX1rAhbMQgmJQCcrgX4M8XAg' \
--header 'Content-Type: application/json' \
--data-raw '{
    "widgetProactiveSeconds": 5,
    "widgetDisplayBubbleMessageSeconds": 3,
    "widgetBubbleMessageText": "Küsi minult!",
    "widgetColor": "#12345",
    "isWidgetActive": true
}'

curl --location --request GET 'http://localhost:9091/cs-get-widget-config' \
--header 'Cookie: customJwtCookie=eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIiLCJmaXJzdE5hbWUiOiJtYXJ5IiwibGFzdE5hbWUiOiJtYXJ5IiwiaWRDb2RlIjoiRUU2MDAwMTAxOTkwNiIsImRpc3BsYXlOYW1lIjoibWFyeSIsImlzcyI6ImJ5ay5idWVyb2tyYXR0LmVlIiwiZXhwIjoxNjcwNDIzNTE2LCJsb2dpbiI6Im1hcnkiLCJpYXQiOjE2NzA0MTYzMTYsImp0aSI6IjUzZmViM2I0LWM0NTgtNGZiOC1hMmEyLTA2NzU0ZGQzYWNkZSIsImF1dGhvcml0aWVzIjpbIlJPTEVfQURNSU5JU1RSQVRPUiJdfQ.lmod2v_UmMmCxjx-Qjsv35OgwdAMWKha-cM_tejP4O5qFrMLoahUrnWxjk4rBzyI9y_4VegfPbC8nMg82QhDcGyH78N5gz2T_zatdYJZ0Ium_qD8QSyMDic2W38a0kW3Ksb4M_wiiaNSfk3vh829dvpcal0f6u2VI5Zb7iRbp3SVKkRKuhQssvQ42cyvNcw9fE8avDAwet1gBD7Ag82faHdHzWt1esDHC5aVDrUoofuAnNjACMMP3ZYLaPFOyu_hwTUHCQzDu1JUyoSzU5RmnQdFlkB0yGAyQ5dG1MYLuHDXiWlnR0cZ8huEpcIOyAPX1rAhbMQgmJQCcrgX4M8XAg'

curl --location --request GET 'http://localhost:9090/get-widget-config'

[ceirowe]

@rasmusei Prototype updated according to AC-s. !NB The field "proactive seconds" determines the animation iteration count, not duration in seconds (for better animation lifecycle)

[janinakimtrohlev]

BUG - Collor choice is not working right now. It shows pallet but it is not available to push and choose. Should be administrator can change Bürokratt's color (appearance), color palette and RGB options are displayed.

[1AhmedYasser]

@janinakimtrohlev Could you please split the bugs into separate comments so i can reference them in the PR

[janinakimtrohlev]

BUG - Animation is not working. I choose for example jump and push Save. But it doesn´t work. Also the same if i put shockwave and wiggle. Should be if i choose jump and save it then the widget should jump. The same with shockwave and wiggle.

[janinakimtrohlev]

@1AhmedYasser separated

[1AhmedYasser]

BUG - Collor choice is not working right now. It shows pallet but it is not available to push and choose. Should be administrator can change Bürokratt's color (appearance), color palette and RGB options are displayed.

@janinakimtrohlev Added Color Palette and removed manual input to avoid human error

[1AhmedYasser]

BUG - Animation is not working. I choose for example jump and push Save. But it doesn´t work. Also the same if i put shockwave and wiggle. Should be if i choose jump and save it then the widget should jump. The same with shockwave and wiggle.

@janinakimtrohlev Working on local side, Please Recheck it again, You have to make sure to set Proaktiivsusaeg to a value higher than 0, because it controls the animation duration in seconds

PS: Please refresh the bot page after every save to reflect the changes

[janinakimtrohlev]

BUG - in back-office I can change widget behavior and appearance and see the preview. But in widget doesn´t change. Should be if I change in back-office widget behavior and appearance it should be changed in widget.