Prerequisites
- Create a IBM Cloud account: If you haven't already, sign up for an IBM Cloud account at cloud.ibm.com.
- Set up an IBM Watson service: Choose the Watson service you want to integrate, such as Watson Assistant or Watson Discovery, and create an instance of that service.
- Develop basic familiarity with Squarespace, focusing on using its Code Injection feature.
Obtain IBM Watson API Credentials
- Navigate to your IBM Cloud dashboard, go to your Watson service instance, and find the API Credentials section.
- Copy down the API Key and URL provided. You'll need these to make API calls.
Design Your Watson Interface
- Plan the user interaction with Watson on your Squarespace site. This involves deciding how users will input data and where responses from Watson will be displayed.
- Prepare any custom scripts needed to handle input/output formatting between Squarespace and IBM Watson.
Use Squarespace Code Injection
- Log into your Squarespace account and navigate to the page where you want to add the Watson integration.
- Go to the Settings panel and choose Advanced > Code Injection.
Add IBM Watson SDK and Custom Code
- In the Code Injection field, insert the necessary JavaScript libraries. For instance, if using Watson Assistant, you might need the Watson SDK for JavaScript. Suppose using unpkg, here's how you embed it:
<script src="https://unpkg.com/ibm-watson-sdk"></script>
- Include your custom JavaScript to send requests to Watson API and handle responses. Make sure to securely handle your API credentials. An example setup might look like this:
<script>
const assistant = new WatsonAssistantV2({
iam_apikey: 'your-api-key',
url: 'your-service-url'
});
function sendMessageToWatson(message) {
assistant.message({
input: { 'text': message },
assistantId: 'your-assistant-id',
sessionId: 'your-session-id'
}).then(response => {
displayResponse(response);
}).catch(err => {
console.error(err);
});
}
</script>
Design the User Interface
- Use Squarespace's editing tools to add HTML blocks where users can interact with Watson, such as a chatbox. Here is a simple structure:
<div id="chatbox">
<input type="text" id="userInput" placeholder="Ask me anything!">
<button onclick="sendMessage()">Send</button>
<div id="responseDisplay"></div>
</div>
- Include a JavaScript function that grabs user input and calls the Watson API:
<script>
function sendMessage() {
const userInput = document.getElementById('userInput').value;
sendMessageToWatson(userInput);
document.getElementById('userInput').value = ''; // Clear input field
}
function displayResponse(response) {
document.getElementById('responseDisplay').innerHTML = response.output.generic[0].text;
}
</script>
Test Your Integration
- Once you've added all necessary code and customized the appearance to fit your site's theme, thoroughly test the integration.
- Ensure that messages are sent and received correctly and that Watson's responses display as expected. Debug any issues using browser developer tools and Watson API logs.
Publish Your Site
- After confirming everything works correctly, publish your site changes.
- Conduct further testing on the live site to ensure real-world functionality and performance are optimal.
Monitor and Improve
- Regularly check interaction logs and Watson's performance. Use feedback and metrics to continually improve the integration.
- Consider adding new features or refining the Watson model based on user interactions and feedback.
