Code Monkey home page Code Monkey logo

Comments (8)

Julianerik avatar Julianerik commented on August 28, 2024 1

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.

Julianerik avatar Julianerik commented on August 28, 2024 1

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.

Julianerik avatar Julianerik commented on August 28, 2024

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.

JefferMarcelino avatar JefferMarcelino commented on August 28, 2024

I added it.

from talkjs-examples.

Julianerik avatar Julianerik commented on August 28, 2024

Did it solve the issue, or does it persist?

from talkjs-examples.

JefferMarcelino avatar JefferMarcelino commented on August 28, 2024

Didnt solve. I keep trying to solve.

from talkjs-examples.

Julianerik avatar Julianerik commented on August 28, 2024

Could you share the entire code snippet where you implement TalkJS, as well as the error message?

from talkjs-examples.

JefferMarcelino avatar JefferMarcelino commented on August 28, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.