Comments (8)
Hi there!
I would recommend you to make use of useRef hook rather than document.getElementById.
Here's a tutorial for implementing TalkJS into a Next project, hopefully it can help you out:
https://talkjs.com/resources/add-chat-to-a-next-js-app-with-talkjs-tutorial/
from talkjs-examples.
Hi!
I'm gonna close this issue seeing as I haven't heard anything new.
If you got any more issues, please feel free to open up a new issue, or contact us via our support chat at https://talkjs.com/ , and we can help you out further. 👍
from talkjs-examples.
Hi there!
It looks like you've missed to add your appId, you can find it in your dashboard over at https://talkjs.com/dashboard/.
Also, I can't see all your code, but it looks like the last closing bracket is happening very early on in the code, have you created a ref in which you mount the inbox?
from talkjs-examples.
I added it.
from talkjs-examples.
Did it solve the issue, or does it persist?
from talkjs-examples.
Didnt solve. I keep trying to solve.
from talkjs-examples.
Could you share the entire code snippet where you implement TalkJS, as well as the error message?
from talkjs-examples.
My ChatBox component
import { useEffect } from 'react';
import Talk from "talkjs";
const ChatBox = () => {
useEffect(() => {
Talk.ready.then(() => {
// After `Talk.ready`
const currentUser = new Talk.User({
id: '156',
name: 'Henry Msssill',
email: '[email protected]',
photoUrl: 'henry.jpeg',
welcomeMessage: 'Hello!',
role: 'default',
});
const otherUser = new Talk.User({
id: 's2',
name: 'Jessicssa Wells',
email: '[email protected]',
photoUrl: 'jessica.jpeg',
welcomeMessage: 'Hello!',
role: 'default',
});
const session = new Talk.Session({
appId: 'ID',
me: currentUser,
});
const conversationID = Talk.oneOnOneId(currentUser, otherUser);
const conversation = session.getOrCreateConversation(conversationID);
conversation.setParticipant(currentUser);
conversation.setParticipant(otherUser);
const chatbox = session.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById('talkjs-container'));
});
}, []);
return (
<div id='talkjs-container' className='fixed bottom-4 right-4 h-96 z-[999]'>
</div>
)
}
export default ChatBox
Where I am trying to use
const LandingPage: NextPage = () => {
return (
<>
<ChatBox />
<div>
<Header />
<main>
{/* ... */ }
</main>
<Footer />
</div>
</>
)
}
export default LandingPage
from talkjs-examples.
Related Issues (20)
- Question regarding adding participants HOT 2
- React native Webview not working on iOS 13 HOT 3
- Uncaught (in promise) TypeError: Cannot read properties of null (reading 'postMessage') HOT 13
- React Native/Expo shows white screen while loading Chatbox/ConversationList HOT 3
- Chatbox screen not loading in flutter HOT 1
- Flutter pub get failed HOT 1
- React Native 0.5.0 - Attempted to assign to readonly property HOT 7
- Catch TalkJS errors client side for error reporting HOT 1
- Flutter SDK always loading in flutter module HOT 5
- ][Error: conversation
- [React native] Error: conversationBuilder._setInjectJavaScript is not a function (it is undefined) HOT 2
- `react/simple-example` seems like an extraneous directory HOT 1
- Adding nextMessage prop to UserMessage in the Theme editor HOT 2
- React native, webview is zoomable HOT 1
- 'InAppWebView' has different definitions in different modules HOT 2
- Button Actions HOT 4
- Vue.Js Implementation HOT 2
- Issue with some users receiving messages that are meant for other users HOT 1
- How to parse special characters into the property "name"?.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from talkjs-examples.