Although there is a huge buzz about ChatBot in the market, ChatBot failures continue to get more attention. ChatBot requires a keen understanding of the client requirements, end customer convenience, and a sense of human interaction to make it as realistic and customizable as possible. As we know, there are just a few success stories after hundreds of failures. Even if ChatBot's success stories are very rare, our ambitious interface designers and developers deeply researched, analyzed, and successfully created a ChatBot. Creating ChatBot was challenging but this entire journey left us with invaluable, thus creating our ChatBot Success Stories. Here's a sneak peek into how we finished the project successfully.
The client requirement was to implement a ChatBot widget script, which users can integrate on any website. This can be
done just by just pasting the two lines of script code like any plugin. The client already had their ChatBot API built, to
which our widget script sent a request and the response was coming from the API. For example, if you send "Hello",
the bot replies "Hello". No platform is used for this response, only the pure script is used to implement ChatBot -
1) Dynamic theme of widget: In this feature, the color, logo, initial welcome messages & the language dynamically changes as per the response from the API. It sets the color & logo of the widget & then load the welcome messages in the widget according to the response received from our client API script.
2) Structured reply of the bot: In this feature, there are some fixed types of responses for particular message types. These messages directly come from the API. Therefore, the first thing we did was to structure responses in UI format as per the message types.
a) If our message is “hello”, it is a simple message type, then the reply of the Bot should display in the simple message format.
b) If my message is “menu”, it is a card type of message, then the reply of the Bot should display in Partial Carousel format.
4) Mobile Responsiveness: In this feature, we applied mobile responsiveness using CSS on widget UI to display the widget properly. We made it attractive and adjustable on every screen size
5) Widget on Full Screen: In this feature, the client wanted to display the widget in a way it would look on a full screen. This means if we open a widget on Mobile Device like whats-app and if we open a widget on Desktop Screen, then the widget should display in normal size and not in full screen.
6) Re-sized Window: In this feature client wanted to display a widget on full screen if the user re-sized their browser window on the desktop, just like a mobile screen. We did the needful and optimized the widget accordingly.
1) Partial Carousel /Slider: This was the most challenging part of the project as we had structured replies of the Bot using JS to display UI on the widget. However, it was a bit difficult to apply CSS and styling on the carousel. Therefore, we applied CSS using JS and used Owl Carousel for carousel output. In this client requirement, they wanted us to display some parts of the first and last slide with the current slide. The aim was for people to be able to slide using the display arrows on the slider. For the slider, the arrow requirement was to hide the left arrow on the first slide and to hide the right arrow on the last slide.
2) Slider’s arrows not working on page refresh: When we refresh the page, the previously loaded slider’s arrows were not working. Only the newly loaded Carousels arrows were working. So, in order to resolve this issue, we used SessionStorage and loaded the Carousel function each time as we loaded the SessionStorage values.
3) Session/cookies history: As the ChatBot widget conversation was not stored in the backend, it became a bit complex to retrieve conversation history on page refresh. To resolve this challenge we used SessionStorage and retrieved the Stored values of SessionStorage on each page refresh.
4) Widget on Full Screen: As the widget was placed within an iframe, it was difficult to manage the iframe on the mobile screen. This was because the whole widget code was in JS and CSS and it was not getting applied by the CSS file. So, we wrote a script code to resize the Widget iframe size on an event when the screen size is changed.
5) Pop-up Modal on Full Screen: It was an interesting thing to work on. The requirement was to display the message “message with buttons” and on clicking the message button the pop-up modal should get open on full screen on the Desktop or Mobile screen. Within that pop-up modal, any link/website URL should open, and that website or forms should be displayed within that pop-up modal.
The challenge within this functionality was to manage iframe size in the parent window of the widget parent window. As the script might get pasted by the user on any website window, and our widget would be placed within some iframe size. To display the pop-up modal on the Desktop screen size, we set the iframe size outside of the widget screen.
How to inject HTML code within JS :
It was overall an amazing and insightful experience to work on this project. It didn’t just help us learn a lot of new things but also gave practical exposure to the challenges that we may come across while doing any upcoming ChatBot Projects.
Cryptex Technologies is a website development company based in India. With our expert team of developers, we design an engaging ChatBot software and power your venture towards growth.