How to embed chat in custom modal?

General
1

Hi
Is it possible to embed kore.ai’s chatbot in a custom modal.
See this sample.

Any help would much be appreciated. Thanks

2

@caroline.torres
I will work with the UI team to get this view and update you by tomorrow. Since there was a duplicate topic posted inadvertently, I deleted the same.
cc: @yogaramya.mendu

1 Like
3

Hi @caroline.torres,

We have discussed this with our UI team and please find the below steps to embed the chat window in a custom modal.

  • Ideally, the “kore-chat-window” class gets appended to the body of the HTML page.
    image
  • To get the kore-chat-window class appended to the modal that you have defined, you will need to add the below attribute/option in the SDKApp >> UI >> koreconfig.js >> var chatconfig

container: “.modal-body”,

image

Here, the modal-body is the class name of the container/div in which we would like to display the chat window.

Now, you can observe that the chat window will not be available in the page and it will be appended to the modal body.
However, to have the chat window properly aligned and change the position from right to Center, you will need to make necessary CSS changes in the chatwindow.css file.

Let us know if you need any further clarification.

Regards,
Yoga Ramya

1 Like
4

Thanks for your help @swagata.sengupta @yogaramya.mendu!

Below was my output.
Screen Shot 2020-11-09 at 7.57.55 PM

I was wondering if there are some scripts or css files delivered through CDN? Or majority are available only in bundle in the GitHub repo?

5

@caroline.torres
Not sure we understand your question. You may look at our github. All the css and js files are referenced in Index HTML files.

6