Je eigen GPT op je Squarespace website zetten
Je kan er niet meer rond: AI en ChatGPT zijn hot hot hot! Vermoedelijk gebruik jij de tool al om jezelf te laten inspireren of ondersteunen.
Ik speel er graag mee om te experimenteren. En 1 van mijn experimentjes was een eigen GPT bouwen waar klanten alle vragen kunnen stellen die ze willen. Niet alleen over Fat Fish, maar ook om een mopje, inspiratie voor hun social media, het schrijven van een blog, …
Het doel was dus om in ChatGPT een eigen GPT te maken, en deze vervolgens als chat (cfr. Fat Chat) op mijn Squarespace website zetten, bereikbaar via een chatknop rechtsonderaan.
Hoe ga je hiervoor aan de slag:
Wat heb je nodig?
Een betalend abonnement bij ChatGPT
API-key van ChatGPT (ook betalend)
Squarespace business of hoger
Je GPT bouwen
Beginnen doen we uiteraard bij het begin, en dat is het bouwen van je GPT.
Met het bouwen van een GPT bedoelen we eigenlijk dat we een kamer maken in ChatGPT en iedereen die in de kamer komt, moet antwoorden krijgen van ChatGPT waarvoor wij richtlijnen hebben gegeven.
Wat mag hij zeggen en wat niet?
Hoe moet hij zich gedragen?
Welke taal moet hij gebruiken?
Mag hij grappig zijn?
Mag hij wat pushen naar een afspraak of net niet?
…
Je moet dus je ‘digitale medewerker’ wat opleren.
Het bouwen van je GPT wijst zich uit, omdat ChatGPT je hier stap voor stap in meeneemt. Beginnen doe je in elk geval op de website van ChatGPT en dan links bovenaan “Bouw je eigen GPT”.
Je GPT op je website zetten
En dan volgt het moeilijkste stuk… Embedden, API keys, … ja, er komen dure woorden aan.
Vertel ChatGPT dat je je GPT wil embedden. Hij zal je de nodige code voorzien om je GPT te kunnen embedden.
In die code zal je "Authorization": "Bearer JOUW_API_SLEUTEL" zien terugkomen. Die JOUW_API_SLEUTEL moet je vervangen met je eigen API sleutel.
Hier kan je een API-key maken: https://platform.openai.com/api-keys
Klik in het linkermenu op "API Keys".
Klik op "Create a new secret key".
Kopieer de sleutel en bewaar hem veilig (je kunt hem later niet opnieuw bekijken!).
Plak de sleutel mee in de code van ChatGPT.
Bij mij lukte het niet via deze stapjes. Ik moest even nog langs ‘billing’ aan de linkerkant om een betaalmethode toe te voegen. Nadien ging het wel.
De GPT in Squarespace zetten
In Squarespace maak je een aparte pagina aan (die je bijvoorbeeld /chat noemt)
Voeg een code-veld in en plak daar je code van ChatGPT in
Verberg de navigatie en footer op die pagina
Zet nog een klein intro-tekstje (en/of afbeelding) boven de chat.
Ziet de chat er niet uit zoals je wil? Ga dan terug naar ChatGPT en vraag hem de code bij te sturen. Ik heb hem bijvoorbeeld gevraagd die chatbalk onderaan te zetten en de hoeken af te ronden.
De chatknop (en pop-up) op je site zetten
Deze code heb je nodig:
<script>
// Wacht tot jQuery geladen is (dit is meestal al aanwezig in Squarespace)
window.addEventListener('load', function() {
// Voeg de chatknop toe aan de pagina
var chatButton = document.createElement('div');
chatButton.id = 'floating-chat-button';
chatButton.innerHTML = '<button id="open-chat-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> <span>Chat</span></button>';
document.body.appendChild(chatButton);
// Voeg de chat popup container toe
var popupContainer = document.createElement('div');
popupContainer.id = 'chat-popup-container';
popupContainer.innerHTML = '<div id="chat-popup-header"><span>Chat met Fatfish</span><button id="close-chat-btn">✕</button></div><iframe id="chat-iframe" src="about:blank" width="100%" height="100%" frameborder="0"></iframe>';
document.body.appendChild(popupContainer);
// Voeg CSS toe
var styleElement = document.createElement('style');
styleElement.textContent = `
#floating-chat-button {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
}
#open-chat-btn {
display: flex;
align-items: center;
background-color: #2d76f9;
color: white;
padding: 12px 20px;
border-radius: 50px;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
}
#open-chat-btn svg {
margin-right: 8px;
}
#chat-popup-container {
position: fixed;
bottom: 100px;
right: 30px;
width: 350px;
height: 500px;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: none;
flex-direction: column;
z-index: 9999;
overflow: hidden;
}
#chat-popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background-color: #2d76f9;
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
}
#close-chat-btn {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
#chat-iframe {
flex-grow: 1;
border: none;
}
@media (max-width: 768px) {
#chat-popup-container {
bottom: 80px;
right: 10px;
width: calc(100% - 20px);
height: 60vh;
}
}
`;
document.head.appendChild(styleElement);
// Event listeners
document.getElementById('open-chat-btn').addEventListener('click', function() {
var popup = document.getElementById('chat-popup-container');
popup.style.display = 'flex';
// Laad de iframe alleen als deze nog niet geladen is
var iframe = document.getElementById('chat-iframe');
if (iframe.src === 'about:blank') {
iframe.src = 'JOUW URL';
}
});
document.getElementById('close-chat-btn').addEventListener('click', function() {
document.getElementById('chat-popup-container').style.display = 'none';
});
});
</script>Pas in de code ‘JOUW URL’ aan naar de URL van de pagina waar je je GPT hebt geplaatst. Dit staat redelijk ver onderaan, in lijn 99. Dus even zoeken :-)
In de <style> tags kan je je voorkeuren aanpassen, zoals de kleur van de chat-button bijvoorbeeld.
Ga naar je Squarespace dashboard
Ga naar "Website" > "Website-tools" > "Code-injectie"
Plak de bovenstaande code in het "Footer"-veld
Klik op "Opslaan"
Als alles goed gelukt is, zou nu de chat al tevoorschijn moeten komen op je website. Maar je zal merken dat in het chatvenster nog eens die “chat” tevoorschijn komt. Dat is omdat het gewoon een iFrame is van een gewone pagina.
We lossen dit op door op de pagina van de chat code toe te voegen die er voor zal zorgen dat de knop daar verborgen wordt.
Dit is de code:
<!-- Voeg deze code toe aan de specifieke pagina waar je de chatknop wilt verbergen -->
<style>
/* Deze CSS verbergt de chatknop en popup container */
#floating-chat-button,
#chat-popup-container {
display: none !important;
}
</style>
<!-- Als alternatief kun je ook deze script-oplossing gebruiken als de CSS niet werkt -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Wacht tot de pagina geladen is
var hideChat = function() {
// Zoek de chatknop elementen en verberg ze
var chatButton = document.getElementById('floating-chat-button');
var chatPopup = document.getElementById('chat-popup-container');
if (chatButton) chatButton.style.display = 'none';
if (chatPopup) chatPopup.style.display = 'none';
};
// Voer direct uit en nogmaals na een korte vertraging (voor het geval elementen later worden toegevoegd)
hideChat();
setTimeout(hideChat, 1000);
});
</script>Ga naar de pagina waar je de chatknop wilt verbergen in de Squarespace editor
Voeg een nieuw "Code" blok toe aan de pagina (bij "Add Block" > "Code")
Plak de bovenstaande code in het code blok
Klik op "Apply" of "Toepassen"
Publiceer je wijzigingen
