![]() ![]() In order to style your chat, you must declare your CSS rules for chat at the same place it was implemented. When you create a chat, you are given a code snippet similar to this. As stated above, Chattable was built with the intention that it is embedded into website in an. How do I style my chat?įirst and foremost, you can NOT edit the stylesheet of the chat itself from the direct link to your chat. ![]() To make your chat look fancy, or however you please, you will need to embed it into your website using an iFrame and add a stylesheet to it using a tag, due to the nature of cross-origin scripting Chattable is built to handle all contentWindow.postMessage() requests as CSS rules, and the string is put into a tag. It is possible to just visit the link to your chat directly, however, due to the nature of Chattable and the idea being that the developer can customize their chat, you won't see any styles or CSS stylesheet other than what I provided as your default, minimally styled chat. When you create a chat a random chat ID is generated if you don't select a custom chat ID, this chat ID is referenced in the link to your chat e.g /embed?chat=000, the chat ID for this chat would be 000. Using Google Firebase for a realtime database instead of a dedicated server with backend scripting, I've created this website that was intended to be ran in an on Web Developer's websites. ![]() Using an iFrame & a Script tag, you'll have a well-implemented, private, and encrypted chat that you can apply your own styles to. Using fast & secure methods to instantly talk amongst your site's users. RemoveEventListener("DOMContentLoaded", initWhenReady) Ī(document.querySelectorAll(".Chattable is a FREE, simple, embeddable, and CSS style-able live chat for your Neocities website. Ĭonst wdg = document.createElement("div") Note how data attributes can be used in DOM elements to store more data specific to your widget. any element having a CSS Class of chat-box) and then initialize a widget inside of them (jQuery made this approach popular). You could add your "script" once and wait for the rest of the page to load, then search the document for a "known" set of elements (ex. the chat id), defining styles as well other possible improvements that would make the runtime more efficient. You would have to add more in order to support passing options to each widget (ex. This is just a sample approach of how it could be done. So you could use this in multiple places just by droping in this script tag in the desired locations: Here is a simple Javascript Widget factory - the create() returns an HTML element with your widget: const Widget = Object.create(` ĭocument.getElementById(id).appendChild(myWidgetInstance) Let me break it down this way: Widget Factory Also, since you are not using Web Components (and are looking for a pure javascript (no libs)), then you also have to initialize the widget "manually" and then insert it to the page at the desired location - as oposed to a declaritive approach where you have an assigned HTML tag name for your widget that you just add to the document and magic happens :) When creating a pure JS widget you need to ensure that you are aware that a) you do NOT have control over the global space and b) that it needs to play nice with the the rest of the page. I was going to suggest that going forward you do this using Web Components - there are polyfills available today that make this work on nearly all browsers - but since your question mentioned that you wanted to know how it is done without it, I detail below one of my approaches. But since you ask about embeding a widget, I don't think that is what this question is about (there are tons of info. Can anyone point me in the right direction on how to get started making JS web widgets? Thank you! (Maybe a ReactJS to VanillaJS converter would be super cool)Ī pure Javascript App is called a SPA - Single Page Application - and they have full control over the document (page). I never knew this was a thing until I tried implementing it myself. How do you even make one of those pure javascript apps, and what are they called? (Not web components I assume, because there have been widgets for a long time). After searching online for hours I have yet to find an explanation/tutorial on how to make those JS files that hook onto a and render the widget. I realize that iframes are suboptimal for embedded JS widgets, and all the best embedded apps are importing. However, when I import the chat app as an iframe and give it position: fixed bottom: 0px right: 15px, the iframe does not go to where I expect it to go. I want to make the chat popup stick to the bottom-right hand corner of the screen regardless of where you scroll. It looks just like Intercom and all the other chat popups. I have a chat widget that I want to embed it other people's websites. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |