Q: Multiple Websites / Widget Styles
Is it possible to create multiple Tiny Chat widget styles? Let's say I run two (tiny) businesses. Can I create one widget with blue primary color, and another one with yellow color? Also, can these widgets have different texts (headline and so on)?
bastien_barn
Oct 14, 2024A: Currently, the Tiny Chat dashboard allows you to manage one main profile per Slack workspace.
However, you can customize your widget's appearance and content on different websites using our JavaScript API. This lets you easily change the title and subtitle for each site. You can check out the documentation here: https://github.com/nils-tc/tiny-chat.com/tree/main/js-api.
Specifically, you can use window.tinyChat.setTitle() and window.tinyChat.setSubtitle() to update these elements dynamically.
For CSS customization, we’ll be releasing detailed docs soon! In the meantime, feel free to reach out to us at contact@tiny-chat.com if you'd like help setting it up manually.
As an Sumo-ling, you also get personalized setup assistance, so don't hesitate to contact us for tailored advice! 😊
TimTimPLUS
Verified purchaser
Thanks for your detailed answers!
Great that things like the primary color will be configurable via the JS API! I hope there is a way to set the primary color once (and not for each element using the color).
Maybe via CSS variable?
Plus points for offering a framework-agnostic solution (not just React) 👍
I am glad that you noticed, the widget is pure javascript / css ;)
We already use css variables, you can look for `--main-color` and `--text-color-over-main-color` .
The css variables are within a shadow DOM, which can be a bit tricky to override them, that's why we will provide some docs soon.
But if you already know how to do that, please go ahead!
TimTimPLUSVerified purchaser
Interesting! Overwriting shadow DOM styles it tricky, yes. Glad to hear that you will add a documentation for it.
But good choice of using a web component for the widget!
108665960248826664188Thank you for this answer!