← Back to Work Items

ChatGPT chatbotot létrehozása a HomeGo számára - jobb alsó sarokban - Make a ChatGPT Chatbot for HomeGo - right corner

#723 User Story New New Hungary/Romania
Open in ADO ↗
Created By
Domas Andrijauskas
Changed By
Jeney Júlia
Project
homeGo Portal
Area Path
homeGo Portal
Iteration Path
homeGo Portal
Priority
1
Created Date
2025-03-26 14:06
Changed Date
2025-08-07 07:34
Tags
2025 4 Months
Rev
11

Description

Készítettek egy verziót a marketing csapat és több chatbotot a WHM CLOUD számára a WordPress-ben: jobb alsó sarokban, a nagy kérdőjel alatt: https://whmcloud.lemonshakers.io/

A Rispose appot használták: @Dorin Inovan @Radu CIGMAIAN tudjátok hogyan lehetne integrálni ilyen gyorsan? https://rispose.com/

ENG: A version was made by marketing and more chatbot to WHM CLOUD in Wordpress: right corner below big question mark: https://whmcloud.lemonshakers.io/

They have used: Rispose app. @Dorin Inovan @Radu CIGMAIAN do you have any idea, how it could be integrated this way fast? https://rispose.com/

-----------------------------------------------------------------------------------------

Beta version of ChatGPT chatbot: https://chatgpt.com/g/g-67c8505afe8c81919d3e5202ee8699ad-ai-ugyfelszolgalatos-munkatars-homego


ChatGPT megkérdezte, hogyan lehet ezt hozzáadni a WordPress-hez:

A ChatGPT integrálása egy WordPress weboldalba chatbotként többféleképpen is megvalósítható. Íme egy lépésről lépésre útmutató, amely segít a ChatGPT integrálásában a WordPress weboldalra.

1. Módszer: Chatbot bővítmény használata

A legegyszerűbb módja a ChatGPT által működtetett chatbot hozzáadásának a WordPress-hez, ha bővítményt használunk.

1. lépés: Chatbot bővítmény telepítése

  1. Jelentkezz be a WordPress irányítópultjára.

  2. Menj a Bővítmények > Új hozzáadása menüpontra.

  3. Keresd meg a ChatGPT/ OpenAI támogatásával rendelkező chatbot bővítményeket. Néhány népszerű lehetőség:

• AI Engine – Chatbot & AI Content (Jordy Meow-tól)

• WPBot AI Chatbot (QuantumCloud-tól)

• Chatbot with OpenAI GPT (Különböző bővítmények)

  1. Kattints az „Install Now” (Telepítés) gombra, majd aktiváld a bővítményt.

2. lépés: A bővítmény beállítása

  1. Navigálj a chatbot bővítmény beállításaihoz (általában az oldalsó menüben található).

  2. Keresd meg az API kulcs integrálásának lehetőségét.

  3. Szerezd meg az OpenAI API kulcsot:

• Látogass el az OpenAI weboldalára

• Jelentkezz be és generálj API kulcsot az API beállítások alatt.

  1. Add meg az API kulcsot a bővítmény beállításai között.

  2. Testreszabhatod a chatbot megjelenését és viselkedését (név, avatár, üdvözlés, stb.).

  3. Mentsd el a beállításokat.

3. lépés: A chatbot hozzáadása az oldaladhoz

• A legtöbb bővítmény biztosít egy rövidkódot vagy widgetet, amellyel bárhol elhelyezheted a chatbotot az oldaladon.

• Illeszd be a rövidkódot az oldalakba, bejegyzésekbe vagy az aljára/oldalsávba, hogy mindenhol elérhető legyen az oldalon.

2. Módszer: ChatGPT manuális beágyazása API-n keresztül

Ha egyedi chatbotot szeretnél használni bővítmény nélkül, kövesd az alábbi lépéseket:

1. lépés: Szerezd meg az OpenAI API kulcsot

  1. Látogass el az OpenAI API platformra.

  2. Jelentkezz be, vagy hozz létre egy fiókot.

  3. Generálj API kulcsot.

2. lépés: Egyedi chatbot kód hozzáadása WordPress-be

  1. Menj a WordPress irányítópultjára.

  2. Navigálj a Megjelenés > Sablon szerkesztő menüponthoz, vagy használj gyermek témát a biztonságos módosításokhoz.

  3. Add hozzá az alábbi JavaScript-et és HTML-t az aljához vagy egy egyedi oldalhoz:


ENG: ChatGPT asked about how to add this into Wordpress:

Adding ChatGPT to a WordPress website as a chatbot can be done using various methods. Here’s a step-by-step guide to help you integrate ChatGPT into your WordPress website.

Method 1: Using a Chatbot Plugin

 The easiest way to add a ChatGPT-powered chatbot to WordPress is by using a plugin.

Step 1: Install a Chatbot Plugin

1. Log in to your WordPress Dashboard.

2. Go to Plugins > Add New.

3. Search for chatbot plugins that support OpenAI/ChatGPT. Some popular options include:

• AI Engine – Chatbot & AI Content (By Jordy Meow)

• WPBot AI Chatbot (By QuantumCloud)

• Chatbot with OpenAI GPT (Various plugins)

4. Click Install Now and then Activate the plugin.

 

Step 2: Configure the Plugin

1. Navigate to the chatbot plugin settings (usually found in the sidebar).

2. Look for an option to integrate an API key.

3. Obtain your OpenAI API Key:

• Go to OpenAI’s website

• Sign in and generate an API key under the API settings.

4. Enter the API key in the plugin settings.

5. Customize chatbot appearance and behavior (name, avatar, greetings, etc.).

6. Save the settings.

 

Step 3: Add the Chatbot to Your Site

• Most plugins provide a shortcode or widget to place the chatbot anywhere on your site.

• Insert the shortcode into your pages, posts, or footer/sidebar for site-wide availability.

Method 2: Manually Embedding ChatGPT via API

 

If you prefer a custom chatbot without using a plugin, follow these steps:

 

Step 1: Get an OpenAI API Key

1. Visit OpenAI’s API platform.

2. Sign in or create an account.

3. Generate an API key.

 

Step 2: Add Custom Chatbot Code to WordPress

1. Go to your WordPress Dashboard.

2. Navigate to Appearance > Theme Editor or use a child theme for safer modifications.

3. Add the following JavaScript and HTML to your footer or a custom page: 


<script>
async function chatWithGPT() {
    let userInput = document.getElementById("userInput").value;
    let chatBox = document.getElementById("chatBox");
 
    let response = await fetch(https://api.openai.com/v1/chat/completions, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer YOUR_OPENAI_API_KEY"
        },
        body: JSON.stringify({
            model: "gpt-4",
            messages: [{"role": "user", "content": userInput}]
        })
    });
 
    let result = await response.json();
    chatBox.innerHTML += `<p><strong>You:</strong> ${userInput}</p>`;
    chatBox.innerHTML += `<p><strong>ChatGPT:</strong> ${result.choices[0].message.content}</p>`;
    document.getElementById("userInput").value = "";
}
</script>
 
<div id="chatContainer">
    <div id="chatBox" style="height: 300px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px;"></div>
    <input type="text" id="userInput" placeholder="Ask something..." />
    <button onclick="chatWithGPT()">Send</button>
</div>

3. lépés: A chatbot testreszabása és stílusának beállítása

• Adj hozzá egyedi CSS-t, hogy a chatbot szebben nézzen ki.

• Használj JavaScript/jQuery-t az interaktivitás javítására.

3. Módszer: No-Code (Kód nélküli) Chatbot készítő használata (pl. Botpress, Chatbase)

Ha egy teljesen testreszabható, hosztolt chatbotot szeretnél, harmadik féltől származó chatbot készítőket is használhatsz.

  1. Regisztrálj a Botpress, Chatbase vagy Landbot szolgáltatásokra.

  2. Csatlakoztasd az OpenAI API-hoz.

  3. Testreszabhatod és betaníthatod a chatbotot.

  4. Ágyazd be a WordPress oldaladra iframe vagy JavaScript widget segítségével.

Végső gondolatok

• Nem technikai felhasználók számára: Az AI Engine bővítmény a legegyszerűbb megoldás.

• Fejlesztők számára: A közvetlen API integráció több rugalmasságot biztosít.

• Fejlettebb használati esetekhez: A no-code készítők AI betanítást és analitikát kínálnak.


ENG: Step 3: Customize and Style the Chatbot

• Add custom CSS to make the chatbot look better.

• Use JavaScript/jQuery to enhance interactivity.

Method 3: Using a No-Code Chatbot Builder (e.g., Botpress, Chatbase)

 

If you want a fully customizable, hosted chatbot, you can use third-party chatbot builders.

1. Sign up for Botpress, Chatbase, or Landbot.

2. Connect it with OpenAI API.

3. Customize and train the chatbot.

4. Embed it into your WordPress site using an iframe or JavaScript widget.

Final Thoughts

• For non-tech users: A plugin like AI Engine is the easiest way.

• For developers: Direct API integration gives more flexibility.

• For advanced use cases: No-code builders offer AI training and analytics.


Comment by Balázs:
Balázs N. Petioky · 14 days ago
A version was made by marketing and more chatbot to WHM CLOUD in Wordpress: right corner below: https://whmcloud.lemonshakers.io/
They have used: Rispose app. Dorin Inovan Radu CIGMAIAN do you have any idea, how it could be integrated this way fast?
Balázs N. Petioky · 14 days ago
A version was made by marketing and more chatbot to WHM CLOUD in Wordpress: right corner below big question mark: https://whmcloud.lemonshakers.io/
They have used: Rispose app. Dorin Inovan Radu CIGMAIAN do you have any idea, how it could be integrated this way fast? https://rispose.com/

Asana ID: 1209581018712493

Relations (1)

Parent #678
↗