Add a parameter to renderXatkitWidget that specifies where to display the widget (bottom-right or bottom-left)

[jcabot]

Asked by a user.

"Actually I'd like to have the bot appear bottom left instead of bottom right as I have Google recaptcha v3 on my site so there's a terms tab at the bottom right of my page. Is there a css class selector I could use to move the bot?"

and later

"Hmm, i can move the button with .xatkit-widget-container but because the chat window launches to the top left the button does not move completely to the far left."

[hamzaed]

We rely on FlexBox to determine where to render the widget. The steps to render the widget at the bottom left are:

• In .xatkit-widget-container, change right: 0; to left: 0; and update the margin to margin: 0 20px 20px 20px;

• In .xatkit-widget-container > .xatkit-launcher remove align-self: flex-end

  See the result below:

We can add a new parameter to renderXatkitWidget function called position with the default value right.

[jcabot]

I think adding the parameter would be nice (not a top priority though).

Can you write me down the exact CSS I should load together with the "regular" xatkit.css to try to render the widget on the left side?

[hamzaed]

Here is how to override the style to show the widget at the left bottom side of the page:

.xatkit-widget-container > .xatkit-launcher {
    align-self: unset !important;
}
.xatkit-widget-container {
    right: unset !important;
    margin: 0 0 20px 20px !important;
}

[jcabot]

Great. Just tested it on the plugin and works like charm. Still, I guess we should keep the issue open, now as an enhancement to keep in mind the feature of adding this new parameter in the rendering function.