How to Embed AI Chatbots into Your Website: A Step-by-Step Guide

‍Embedding AI tools in your website

In this blog post, we’ll show you exactly how to embed AI tools and chatbots into a website, step by step.

Businesses are flocking to add AI into their websites. The most creative businesses are adding intelligent chatbots to deliver customer support, funnel sales, and even answer FAQs.

For example, robotics automation provider Formic uses a chatbot to answer customer questions about their products.

Customers who land on the web page can ask detailed questions and receive detailed answers instantly. No waiting, no customer loss, no friction.

The embedded chatbot delivers real value to website visitors.

Let's dive in!

How are businesses adding AI to their online presence?

‍A common question small online businesses ask is something along the lines of, "How can I add ChatGPT to my website?"

They don’t necessarily mean “How do I put ChatGPT into my website”. What they really mean is how do I customize ChatGPT with directions, save that customized version of ChatGPT, and embed it into my website as an interactive chatbot?

Well, it’s not that hard. With prompt templates, you can create a guided ChatGPT experience and embed it onto your website so customers can use it. Similarly, you can embed AI tools into an internal workspace like Notion or Sharepoint so that co-workers can use the ChatGPT the way you use it.

Pickaxe makes it easy to add AI chatbots into any website.

Check out this website that offers a personal AI writers room for brainstorming, writing, and editing copy.

Screenshot of Inck.ai, a personal AI-powered writing suite

Before we discuss how to add AI to your website natively, let’s quickly discuss WHY.

‍Why should you add AI to your website?

‍A lot of small businesses or solopreneurs offer “professional services”. This includes all kinds of “knowledge work” like consulting, marketing, coaching, etc. Services that don’t scale.

‍Or at least not historically.

However AI, especially Large Language Models like ChatGPT, offer workers to ability to scale previously unscalable services.

If you are a marketing consultant who helps clients rewrite their sales pitches according to your system, you give a lot of the same advice over Zoom calls, email threads, and phone calls. Your time is the limiting factor to your productivity. Since you can’t scale your time, you can’t scale your business and serve more customers.

But with the onset of Large Language Models, now you can. It’s easy to design a prompt that provides that same expertise you do. By turning transforming your expertise into an interactive chatbot, you can now serve numerous customers at once.

Customers' basic needs can be met by your AI chatbot. For more involved needs they still contact you.

You just outsourced a huge part of your job to your AI chatbot!

Delivering dynamic AI content allows small businesses to scale their services. If you can emulate part of your process with a chatbot, you can serve many more customers simultaneously.

‍How to embed AI chatbots into your website

‍Let’s dive into how to embed an AI chatbot into your website.

‍Step 1 - Create a chatbot

‍The first step is to create an AI chatbot through Pickaxe. Pickaxe is a free, simple way to create a chatbot that requires no code. You can build chatbots in the Pickaxe Chatbot Builder or you can build a widget in The Pickaxe AI Widget Builder.

Making a tool is fairly simple. Write a prompt, add user inputs where you want people to insert their own values, and then customize the design. For a more detailed walkthrough, you can watch the how to make a pickaxe tutorial video.

Remember, the art of prompt design is important. The better prompt you write, the better your chatbot will perform. The best practices of designing a chatbot are debated, but generally it’s good to follow OpenAI’s GPT Best Practices guide.

‍Step 2 - Choose Embed Options

‍Embedding the chatbot into a website is easy. After you’ve made a chatbot on Pickaxe, you can go to a page to manage the pickaxe. Just click the “embed” button.

In the embed customization page, you can customize the look, design, size, and branding of your AI tool to fit your specifications.

‍Step 3 - Paste embed code into your website

‍To add the chatbot to your website, just copy and paste the embed code. It’s that easy!

‍

If you’re building your own website, you can embed the chatbot directly into a website’s HTML. But Pickaxe also works on no-code website builders like Wix, Wordpress, Webflow, and more! Users love Pickaxe because the process requires no code! Embedding your chatbot is as simple as copy and pasting.

Here’s a walkthrough for most popular website builders and workspaces.

‍

‍How to embed AI chatbots using different website builders

‍You can embed AI chatbots into Notion with ease. Just add a new block by clicking the “+” button. Scroll down to look for the “Embed” option. Click it and paste in the pickaxe embed link!

‍

You can embed AI tools into Webflow easily as well. It’s as simple as adding an “embed element” on the add panel. Then just paste the embed link into the box!

The embed block on webflow

Embedding chatbots into Squarespace, Wix, Wordpress, Sharepoint is just as easy. Look for adding an element for "embed code", dragging it into your website, and then pasting in the pickaxe embed code.

‍Adding AI widgets in a website or workspace is really that simple! Build a tool, customize the embed, paste in the embed link!

Once a pickaxe is embedded, it's fast, flexible, and easy to manage. Users can always adjust the prompt and settings without needing to change the embed code. The chatbot will update automatically.

More Examples of Embedded Pickaxes

As a final bonus, we want to share two more excellent integrations of AI into a website.

Mike Rosen runs an AI coaching service called Caasper AI. He created and embedded a chatbot in his website to engage his customers and guide them through how to intelligently use AI in their services.

Check out Mike Rosen's chatbot on his Caasper AI site here.

Adam Aragon runs a AI-powered Dungeon Master that walks you through games of Dungeons & Dragons. Check it out here. There is a GPT-3.5 powered "fast" mode and a GPT-4 powered "Smart" mode, both powered by embedded pickaxes.

Screenshot of FakeDM, a pickaxe-powered Dungeons & Dragons website

‍

How to Embed AI Chatbots into Your Website: A Step-by-Step Guide

Related articles

May 7, 2024

Prompt Design vs Fine Tuning: A fight for control

July 6, 2023

The Top 10 Prompts from our Prompt Design Contest

December 15, 2023

How to use books and documents to make a chatbot: Building a Charlie Munger chatbot