Cómo añadir un widget de ChatGPT a tu sitio web de Squarespace utilizando MyAskAI

Since the advent of ChatGPT I’ve been using their API along with other APIs to chat with my own data. Along the way I’ve had an eye out for tool that could do it for me. One such tool is MyAskAI, a chatbot that uses GPT-style language models to offer instant and precise responses. In this guide, we'll explore how to integrate MyAskAI into your Squarespace site.

Primary use case

In a world where consumers are accustomed to immediate responses, the typical email response time of 12-24 hours is no longer acceptable. Customers want their questions answered instantly, whether they're shopping online at midnight or browsing your services during their lunch break. Moreover, they expect accurate and personalized responses, not generic, automated replies.

The Solution: MyAskAI, Your AI-Powered Customer Service Representative

Enter MyAskAI, an AI-powered chatbot that uses GPT-style language models to understand and respond to user queries accurately. It can be integrated into your website to answer frequently asked questions, guide customers through your offerings, or even help with troubleshooting. The best part? It's available 24/7, ensuring that your customers always have access to immediate support, thereby improving their experience and your brand image.

Integrating MyAskAI into Your Squarespace Site

Step 1: Access your Squarespace site editor and navigate to the area where you want to add the MyAskAI chatbot.

Step 2: Click the "+" button to add a new element and select "Code" from the available options.

Step 3: In the Code Block settings, enable HTML and leave the script option unchecked.

Step 4: Navigate to www.myaskai.com and create your chatbot. Once created, click on "Embed/Integrate" then “Add AskAI to your website” and choose whether you want to embed it within the page or as a ‘chat’ widget. Click "Copy" to copy the embed code.

Step 5: Return to your Squarespace site's code block, delete any placeholder text, and paste the copied MyAskAI code. Click "Preview" and "Save" to see how it will appear on your site.

Step 6: Save your changes in the Squarespace site editor and publish your site.

With MyAskAI integrated into your Squarespace site, you can now provide your customers with instant, accurate responses to their queries, enhancing their experience and increasing their satisfaction. This not only improves your customer service but also frees up your team to focus on more complex tasks, making MyAskAI a win-win solution for your business.

Integrating MyAskAI into your Squarespace site is a strategic move towards enhancing user experience and streamlining customer service. It's a simple yet effective step that can significantly impact your business's success in the digital landscape.

Cómo generar CSS personalizado para Squarespace con ChatGPT

I received a question from one of our customers today about how to make image caption titles appear on hover. I thought this would be a good case study for using ChatGPT to generate CSS on a Squarespace site. Let's dig in.

First, we need to inspect the element. I will isolate the image, and it seems that each of these divs applies to a different image. I will click "Edit as HTML," copy the entire HTML, and paste it here. Now, in my prompt, I will ask ChatGPT to write CSS to make the caption title appear on hover.

To make the caption title appear on hover, we can use CSS. Here's an example of how to achieve this. Let's test it and see if it works. It seems that the image slide title is currently below the image. How can we make it overlay the image? This code might help us achieve that. Let's copy the code and give it a try.

I will paste this in my custom CSS. As you can see, the image title now appears on hover. Let's save that. We might want to change the color of the text and adjust the spacing. To change the font color and size, we can use the following customizations. I will copy that piece and paste it within what we already have here, then hit save.

Now the color is white, and the font size is 20. If we want to make it 30, we can adjust the code accordingly. However, let's bring it back to 20, as that seems good enough.

So, there you have it. This is how you can generate custom CSS for your Squarespace site using ChatGPT. It's quite simple. First, copy your HTML and give a specific command. If the initial command isn't specific enough, go back and provide more clarity. If you have any questions about this process, feel free to leave them in the comments, and I'll be happy to answer them. Peace.

Here’s another example…

You can find the code here.