How to embed the ChatGPT chatbot into a webpage?

ChatGPT
1

Hi guys, does anyone have code that would embed the chatgpt chatbot into a wix webpage so that it allows my site members to use the chatgpt chat?

Thanks!

2

You can embed with <iframe> HTML tags.

:slight_smile:

3

Thank you for responding to my post. I have tried many solutions but nothing works so far, does anyone know what the correct URL to load the ChatGPT chatbot into an iframe on a webpage?

I have tried this code but no luck so far…

chatbot

chatbot

// Replace YOUR_API_KEY with your actual ChatGPT API key const apiKey = "YOUR_API_KEY"; 
    const chatbotFrame = document.getElementById("chatbot");
    chatbotFrame.src = `https://api.openai.com/embeddings/chat-demo/chat.html?api_key=${apiKey}`;

    const handleEvent = (event) => {
        console.log(event);
        const message = event.data.message;
        const output = document.createElement("p");
        output.innerHTML = `<strong>User:</strong> ${message}`;

        const chatWindow = chatbotFrame.contentWindow;
        chatWindow.postMessage({ message: message }, "*");

        chatWindow.addEventListener("message", (event) => {
            if (event.data.message) {
                const output = document.createElement("p");
                output.innerHTML = `<strong>AI:</strong> ${event.data.message}`;
                document.body.appendChild(output);
            }
        });
    };

    window.addEventListener("message", handleEvent);
</script>
4

You code does not create any <iframe></iframe> DOM element as I mentioned.

It’s easy to Google this and read how to use iframe tags:

5

I appreciate you trying to help, but I am a novice, what code would you use?

6 
<iframe src="https://chat.openai.com" title="ChatGPT"></iframe>

Hope this helps.

7

yes that works but I am trying to create it on my webpage so that the chatbot opens for users to use without them having to register for chatgpt.

8

I don’t think you can do that and it may also be against the OpenAI ChatGPT terms of service, etc.

9

ok, i thought that is what the API Key could be used for?

10

The API key is for the OpenAI API.

You said in your title:

How to embed the ChatGPT chatbot into a webpage

There is no API key for ChatGPT. There currently is NO ChatGPT API.

Details matter :slight_smile:

Hope this helps.

11

:sleepy: i guess that’s why i am not a coder… do you know why the chatgpt buttons that are created in your suggested iframe do not work when live on my site? i am referring to the sign in or register buttons

12

Maybe someone else here can help you better than me @ND07 ?

Best of luck in your “I’m not a coder” adventures!

:slight_smile:

13

i appreciate your time, back down the rabbit hole for me :cat:‍:bust_in_silhouette:

14

Hello, I built a product to embed ChatGPT everywhere and you can even define it’s default behaviour. Check it out at https://insertchatgpt.com.

15

I’m also want to embed Chatgpt ifram on my website https://privatestoryname.net. Can anyone please tell me how is the procedure.
Thanks