Svelte
Build any chat use case into your Svelte app
Quickly embed a customizable chat experience into your Svelte app using the best chat APIs, feature-rich SDKs, and highly customizable components.
onMount(async () => {
Talk.ready.then(function () {
const session = new Talk.Session({
appId: '<APP_ID>',
userId: 'nina',
});
session.currentUser.createIfNotExists({
name: 'Nina',
email: 'nina@example.com',
photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
welcomeMessage: 'Hi!',
});
const conversationRef = session.conversation('new_conversation');
conversationRef.createIfNotExists();
const chatbox = session.createChatbox();
chatbox.select(conversationRef);
chatbox.mount(document.getElementById('talkjs-container'));
});
});
Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with Svelte.
Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.
All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.
TalkJS works great with Svelte
Most of the TalkJS code will live in the frontend, so it seamlessly integrates with Svelte. You can ship faster, simplify your stack, and save on development costs by using the best chat APIs and a feature-rich JavaScript SDK. It's all you need to add a fully-featured chat into your Svelte app in minutes instead of months.
<script>
let element;
onMount(async () => {
Talk.ready.then(() => {
// Synchronize user data and set up
const me = new Talk.User(oliver);
const other = new Talk.User(abby);
const session = new Talk.Session({ appId, me });
const conversationId = Talk.oneOnOneId(me, other);
const conversation = session.getOrCreateConversation(conversationId);
conversation.setParticipant(me);
conversation.setParticipant(other);
const chatbox = session.createChatbox();
chatbox.select(conversation);
chatbox.mount(element);
});
});
</script>
Because implementing TalkJS was as fast and easy as it was, we were able to greenlight and move this project along very quickly. Had we not chosen this path, the feature would have either been delayed, or shelved due to the resources needed to implement it.
Ready-made chat UI you can customize
The chat UI comes with three different layouts—that are highly customizable—which you can mix and match to suit your needs. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.
The TalkJS Inbox shows the chat history on the left, selected conversation on the right. It's designed to act as the messaging center of your app, usually living on its own page.
The TalkJS Chatbox is just the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.
You can also show a conversation in a popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.