What’s worth knowing in the Squarespace world.

For designers, developers, and people building businesses around Squarespace.

Fixes Omari Harebin Fixes Omari Harebin

Squarespace 7.0 Blog Comments Not Showing Up

I don’t know how long this bug has existed but for some reason the comment area defaults to display:none.

.squarespace-comments .comments-content.read-only .new-comment-area {
display: none;
}

To fix it, add this to your Custom CSS.

.squarespace-comments .comments-content.read-only .new-comment-area {
display: block !important;
}



Read More
Custom CSS Omari Harebin Custom CSS Omari Harebin

Create Sticky Pagination Links with Vertical Text on the Sides of Your Squarespace Blog

In this blog post, we'll show you how to create sticky pagination links with vertical text on the right and left sides of your blog. This design is perfect for those who want to add a unique and modern touch to their website's navigation.

Here’s how the code was generated, using chatGPT.

/* Variables */
:root {
    --pagination-width: 50px;
    --link-color: #245959;
    --hover-background-color: rgba(0, 0, 0, 0.1);
}

/* Pagination links */
.collection-type-blog .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    float: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    position: fixed;
}

/* Next and older posts links */
.collection-type-blog .pagination a.next-item, .collection-type-blog .pagination a.older-posts {
    right: 0 !important;
    left: auto !important;
    text-align: center;
    width: var(--pagination-width);
}

/* First child link */
.collection-type-blog .pagination a:first-child {
    left: 0;
    text-align: center;
    width: var(--pagination-width);
}

/* Link colors */
body a, body a:link, body a:visited {
    color: var(--link-color);
}

/* Link hover effect */
.collection-type-blog .pagination a:hover {
    background-color: var(--hover-background-color);
    cursor: pointer;
}

With this CSS code, you can create sticky pagination links with vertical text on the right and left sides of your blog. This unique design adds a modern touch to your website's navigation and enhances the user experience. Simply add the provided CSS code to your website's stylesheet, and you're good to go!

Read More
Plugins, Integrations, AI Omari Harebin Plugins, Integrations, AI Omari Harebin

How to add a ChatGPT widget to your Squarespace site using 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.

Read More