React Chatbotify in full screen

[miguelisidoro]

Hi,

Is there any way to have React Chatbotify in full screen like in the image below?

The example was taken from https://copilot.microsoft.com/.

If possible, can you give me an example on how to achieve this?

Thanks

[tjtanjin]

Hey @miguelisidoro, for your case you're looking at styles:

https://react-chatbotify.com/docs/api/styles

In particular, you can start by trying a height and width of 100% for chatWindowStyle. Let me know if it works 🙂

[miguelisidoro]

Hello @tjtanjin,

Thanks, it works!

[miguelisidoro]

Hi @tjtanjin ,

How can we have the bot not in full screen but maximized with a certain width and height?
I have the embedded setting in theme disabled.
If I set it to true, the bot goes to the top left of the page and does not behave as I want: maximized by default on page load but in the right position and with the height and width that I want.

What I have with embedding: false:

What I would like to have:

What I have with embedded=true:

Thanks

[tjtanjin]

Hey @miguelisidoro, this goes back to the styles I shared earlier. If you don't wish for height and width to be 100% you can change the value to something else. To position the chatbot you can wrap it in a div and put it where you wish on the page.

[miguelisidoro]

Hello @tjtanjin,

I am using the following options for the bot ui.

export const aIAssistantOptions: Options = {
  theme: {
    embedded: false,
    fontFamily: "Montserrat, sans-serif;",
    showFooter: false,
    primaryColor: "rgb(87, 31, 255)",
    secondaryColor: "rgb(87, 31, 255)",
  },
  botBubbleStyle: { backgroundColor: "rgb(242,242,242)", color: "rgb(0,0,0)" },
  chatWindowStyle: { width: "50%", height: "95%" },
  botBubble: {
    dangerouslySetInnerHtml: true,
    showAvatar: true,
    avatar: "",
  },
  chatHistory: { storageKey: "ai-assistant-conversation" },
  tooltip: { mode: "NEVER", text: "" },
  notification: { disabled: true },
  header: { title: "AI Assistant", avatar: "" },
  footer: { text: "" },
};

With this options, the chatbot window sets to the height and width I want but the chatbot starts minimized by default. What I want is to have the chatbot maximized by defaullt and occupying 50% of height and width. What do I have to change in my options in order to achieve this?

Changing embedded to true is not a solution since it behaves as I described in my earlier post.

Thanks

[tjtanjin]

Hey @miguelisidoro, for default open chatbot, you can look at this: https://react-chatbotify.com/docs/api/settings/#chatwindow

[miguelisidoro]

Hello @tjtanjin,

According to https://react-chatbotify.com/docs/api/settings/#chatwindow, I should be setting the defaultOpen property to true but it is not available.

If I set the defaultOpen to true, I get the following error.

Object literal may only specify known properties, and 'defaultOpen' does not exist in type '{ showScrollbar?: boolean | undefined; autoJumpToBottom?: boolean | undefined; showMessagePrompt?: boolean | undefined; messagePromptText?: string | undefined; messagePromptOffset?: number | undefined; }'.

I am using the version 1.7.0 of React chatbotify.

Do I need to upgrade to the latest version? If yes, is it retro compatible with 1.7.0?

Thanks

[miguelisidoro]

Hello @tjtanjin,

I migrated to the latest version and after changing the code in a few places, I got it to work using chatWindow: { defaultOpen:true } in settings.

Thanks

[tjtanjin]

Great to hear!

[miguelisidoro]

Hello @tjtanjin,

When will you release the version 2.0.0?

Thanks

[tjtanjin]

Targeted for end of this month, but might get delayed since the gallery website still requires significant work and I'm hoping to time them together.

[miguelisidoro]

Hello @tjtanjin ,

Thanks for the reply.

I want to show a footer with a message but without the attachment and smile images and the 2 lines of text a little bit closer to each other.

I am using the following footer styles:

footerStyle: { alignItems: 'center', justifyContent: 'center' }

What are the bot options that I have to change to hide these buttons and to set the 2 lines of text a little bit closer to each other?

Thanks

[miguelisidoro]

Hello @tjtanjin ,

Just changed the footerStyle and got the 2 lines of text closer as I wanted.

footerStyle: { alignItems: 'center', justifyContent: 'center', lineHeight: '1.5' }

How can I remove the attachment and emoji icons?

Thanks

[miguelisidoro]

Hello @tjtanjin ,

I was able to remove the icons:

emoji: { disabled: true },
fileAttachment: { disabled: true },

Thanks