We built a guided enquiry tool for AI Visibility Studio. Here’s how to use ChatGPT and Codex to build something similar for your own website, even on Kajabi, Squarespace, or WordPress.

You know the conversation you have with a potential customer before they become a customer?

They tell you what’s happening. You ask a couple of questions. Eventually, you say, “Right. This is probably where you should start.”

That conversation holds something valuable: your judgement about what somebody actually needs.

Your website could help people get to that point before they contact you.

At AI Visibility Studio, we built a guided enquiry experience on our website. Visitors choose what they need help with, answer a relevant follow-up, and get a suggested starting point. They can then continue into an enquiry.

It’s the kind of thing you can build with AI assistance for a website you already have. Yes, including one built on a hosted platform.

Key takeaways

Try ours before we get into the code

Open Find your starting point and take a look.

For example, choose “Improve my site,” then “People visit, but don’t enquire.” The experience offers an optional website-address step and suggests examining the journey from arriving on the site to making contact.

There’s no email gate before that suggestion. If you want help, you can continue into the enquiry process, which tells you that your answers will accompany it and that you can review before sending.

It also makes clear that it isn’t scanning your website. The suggestion follows your answers; an actual review would be separate work.

That’s the part worth borrowing: a short, relevant conversation that gives someone a clear next step.

Our version lives on a dedicated page and uses a backend to send enquiry emails. Visitors can also choose “Save for later” to save their answers and request a private return link by email. A simpler recommendation widget can run in page code, but saving answers and sending emails need a supported service or backend.

How the recommendation logic works

Each combination of answers points to a starting point we’ve already defined. Here’s a simplified example.

You don’t need to understand JavaScript to follow this. Two selected answers point to one recommendation.

const recommendations = {
  "improve:enquiries": {
    title: "Turn more visits into enquiries.",
    explanation:
      "We'd follow the visitor's journey and check where " +
      "the offer, proof or contact process becomes unclear."
  }
};
// Values assigned to the visitor's selected answers:
const topic = "improve";
const answer = "enquiries";
const result = recommendations[`${topic}:${answer}`];

Choosing “Improve my site” sets the topic. Choosing “People visit, but don’t enquire” sets the answer. Together, they select the relevant recommendation.

The real work is deciding what advice belongs behind each combination. You bring your knowledge of your customers; the code applies the rules consistently.

The full journey looks like this:

Choose a situation → answer a follow-up → optionally add a website → receive a suggestion → choose whether to enquire → enter name and email → review, give permission to reply, and send.

This small code example only selects a recommendation. Displaying it, saving answers, and sending an enquiry are separate parts of the build.

To plan your own version, write down three things for each outcome: what the visitor tells you, what you’d suggest, and why. That gives your AI builder a clear set of rules to work from.

What could your version do?

A course creator could help visitors choose where to begin. A consultant could help them work out which service fits. A photographer could guide them towards the right type of shoot.

Start with a question people already ask you.

“Which course should I take?” is a good starting point. So is “Do I need the full package?” or “What should I fix first?”

You probably already have a way of answering. You ask about their experience, their goal, or what’s getting in the way. Then you make a recommendation.

Write that down before asking AI to build anything.

For a simple course selector, your rules might look like this:

Add a short explanation to each result. Give people enough context to understand the recommendation, plus a link to explore it.

If none of your offers fits, say so. A good tool needs an honest answer for that situation too.

Where ChatGPT and Codex come in

You can use ChatGPT to work through the questions, wording, and recommendation rules. Codex can help turn that brief into working code, then revise and debug it. OpenAI describes these coding capabilities in its Codex guidance.

For a small widget, the ingredients are usually HTML for the content, CSS for the appearance, and JavaScript for what happens when somebody clicks.

You can describe the behaviour in ordinary language. You still need to check that the finished tool gives sensible answers and works on your actual site.

A tool built with AI doesn’t need AI running inside it. A selector with three outcomes can run on rules you define, without sending every visitor’s answers to an AI model.

A prompt you can adapt

This is a starter prompt for building your own version, not a transcript of our original build. Replace the bracketed details with yours:

Help me build a small guided recommendation widget for my website.
My business is [describe your business]. My visitors are [describe your audience]. I want to help them answer [one specific question].
My website uses [platform, plan, and page editor]. My offers are [list your actual offers and their links].
First, ask me what you need to know to define the questions and recommendation rules. Keep the journey short. Include a sensible outcome for someone who is unsure or does not fit an offer. Show me the rules in plain English before building.
Then create a working preview using HTML, CSS, and JavaScript where appropriate. Show a recommendation with a short explanation and a relevant next step. Match [brand colours, fonts, or a reference screenshot]. Make it work on phones and with a keyboard, and keep its styling from affecting the rest of my page.
Show the result before offering an optional contact step. For the first preview, clearly label email capture as a demo. Ask which email or form service I use before connecting it. Do not invent a working integration or put private API keys in page code.
Check the current custom-code requirements for my platform and give me the installation steps for my setup. Explain what I need to test before publishing.

The first preview gives you something concrete to react to.

Perhaps the questions sound too formal. Perhaps the buttons are tiny on your phone. Perhaps two different answers lead to a recommendation that makes no sense.

Say that.

“Make this sound like a conversation with a customer.”

“Explain why you recommended the workshop.”

“Let people go back and change an answer.”

“Keep their answers if the contact form fails.”

Those instructions work because they come from knowledge of your business that the AI doesn’t have until you provide it.

Can you put this on Kajabi, Squarespace, or WordPress?

Yes, with an installation method that fits your platform and account.

Kajabi: The page builder has a Custom Code block for a visible widget, where CSS and JavaScript go inside <style> and <script> tags. Page settings also have Custom CSS and Custom JavaScript fields, which take code without those tags. Kajabi's instructions cover both.

Squarespace: Code blocks can hold the widget, but running JavaScript or embedding an iframe requires an eligible plan: currently Core, Plus, Advanced, and some legacy plans. Check Squarespace’s code-block requirements before building around that feature.

WordPress: First establish whether you mean WordPress.com or a self-hosted site. WordPress.com needs a plugin-enabled plan with hosting features activated for JavaScript, per its code guide.

On self-hosted WordPress, the Custom HTML block can hold the widget, but only users allowed to post unfiltered HTML can add JavaScript. For other roles, WordPress strips scripts when the post is saved. See the WordPress Custom HTML documentation.

Tell Codex your actual setup. Ask for the exact block, field, or installation method to use. Try it on a draft or duplicate page and check the visitor-facing version.

Our studio experience is a reference for the journey. Your version needs to be packaged for your own site.

The email part needs to work too

An email box on a page is only an email box until it’s connected to something that receives the submission.

For your version, decide what you’re offering at that point. It could be a copy of the result, a follow-up guide, or a way to ask for help.

Make that invitation specific. Someone who has just received a course recommendation has a reason to request a matching lesson plan. Someone seeking advice may want to send their answers with an enquiry.

Reading the page doesn’t give you their email address. They choose to enter it and submit. Explain what they’ll receive, and offer ongoing marketing updates separately from the requested response.

The next instruction to your AI builder should name the real service:

I use [email or form provider]. Help me connect this widget using its supported form or integration. Preserve the relevant result with the submission where supported, show a helpful error if sending fails, and explain how to verify that the contact was saved and the promised follow-up was triggered. Keep private credentials out of the browser code.

The supported connection matters. For example, Mailchimp provides embedded signup forms, while its Marketing API guidance explains why private API access belongs on a server.

A welcome message on the screen doesn’t prove the email arrived. Test with your own address. Check the contact record, any confirmation step, and the promised message in your inbox.

Give it a proper test before you share it

Go through every possible result, on your phone and with a keyboard. Change an answer, leave a field empty, and follow every link.

Ask somebody who doesn’t know your business to try it. Can they explain why they got their result? Do they know what happens next?

Once you’ve configured analytics to record these steps, measure how many visitors start, reach a result, and choose to get in touch or request the follow-up. Those numbers tell you where to investigate. They don’t tell you why somebody stopped.

Whether this brings you more enquiries is something to measure after launch.

Frequently asked questions

Q: Why does my widget’s JavaScript disappear when I save a WordPress page?
A: On self-hosted WordPress, your user role probably can’t post unfiltered HTML, so scripts are stripped on save. On WordPress.com, JavaScript also needs a plugin-enabled plan with hosting features activated.

Q: Does a website recommendation tool need AI running inside it?
A: No. A tool built with AI can run on fixed rules you define, so visitors’ answers don’t need to go to an AI model.

Q: Can I put my Mailchimp API key in the widget’s code?
A: No. Mailchimp says the key gives full account access and doesn’t support client-side API calls. Use an embedded signup form, or make the API call from a server.

Start with one real conversation

You don’t need to imagine every possible thing your website could do.

Pick one question your customers struggle with. Work out what information would help you answer it. Build a small tool around that exchange.

If you’d like more articles like this, leave a comment with the platform you use and the tool you wish your website had: a calculator, a course selector, a better enquiry process. We’re exploring a practical guide to building website tools with AI, and your answer will shape what we build next.

Most websites wait for the visitor to ask the right question. Yours can ask first.

Want help turning your idea into something that fits your website? Talk to AI Visibility Studio and tell us your platform, the question you want the tool to answer, and what should happen afterwards.