Skip to main content

How to Build Awesome Website Widgets with ChatGPT

Build useful web widgets with ChatGPT

Having the right tools can make all the difference no matter where you work. This is true if you work in digital marketing.

Projects are not always the same and the assets needed vary from project to project.

One project might call for interactivity and increased on-page engagement on a landing page. I’ve had many requests for a BMI calculator, a simple ROI calculator for the page, or “make it simple, doesn’t need to connect to a database”.  I had to choose between an out-of-the-box widget from another source or hire a developer to write me a custom script. While the result can be achieved both ways, it was still not customized to my preference or the client’s needs, and it even took too long or cost too much to go the developer route.

One of the most effective ways to enhance your website is by embedding stand-alone widgets that provide valuable functionalities for your visitors. Now, thankfully, there are AI tools that can help.

Leveraging AI, such as ChatGPT, to create these widgets can save time, streamline processes, and ensure a high level of customization.

Let’s dive into the value of using AI for this purpose and provide a step-by-step guide to creating your website widgets.

Why Use AI to Create Widgets?

  1. Efficiency and Speed: AI can generate code quickly, significantly reducing development time.
  2. Customization: By refining AI prompts, you can create highly customized widgets tailored to your specific needs.
  3. Cost-Effective: Leveraging AI reduces the need for extensive development resources, making it a cost-effective solution.
  4. Scalability: AI-generated widgets can be easily replicated and adjusted for different uses across your website.

Step-by-Step Process to Create Widgets Using AI

Step 1: Define Your Widget’s Purpose

Before you start, clearly define what you want your widget to do. Whether it’s a BMI calculator, a UTM code generator, or a stock ticker, having a clear goal will guide the AI in generating accurate code.

Step 2: Craft Your AI Prompts

Write specific and detailed prompts to get the most accurate output from the AI. Here are some examples:

  • BMI Calculator: “Create a JavaScript code for a BMI calculator that includes input fields for height and weight, and a button to calculate and display the BMI.”
  • UTM Code Generator: “Generate a JavaScript code for a UTM code generator with input fields for URL, source, medium, campaign, term, and content, and a button to generate the UTM URL.”

You have to be specific and mention include something like  “create a stand-alone fully responsive, easy-to-paste [your widget name goes here] that will inherit the theme’s styles and look good on any WordPress page”.

Step 3: Generate the Initial Code

This is fun part and the part that saves boatloads of time. Use the AI to generate the initial code based on your prompt. For example, you can use a platform like OpenAI’s ChatGPT to write the code snippets for you. Start by giving it information, in Step 2, and watch the magic unfold.

Step 4: Refine the Code

Review the generated code and refine it as needed. This may involve tweaking the design, ensuring responsiveness, or adding additional features. You will want to make this as easy as possible for you. One method we like to employ is by having the CSS styles within the javascript code.  This is not mandatory as the code generated can have references to CSS classes and IDs, you’d have to define the CSS in your stylesheet of your website. It all depends on your preferences.  Some marketers prefer to have everything in one simple code for that page.  Remember, this isn’t a web application with relation database, its a simple web widget.

You could also specify “please make the ‘submit button’ say “Go!” instead “Calculate Now” or after user hits submit, show this message and redirect to this page. Possibilities are endless.

Step 5: Embed the Widget on Your Website

Once you’re satisfied with the code, embed the widget on your website. This usually involves copying the HTML, CSS, and JavaScript code into your site’s codebase or using a custom HTML block if you’re using a CMS like WordPress. Start with a blank page so you test and tweak the look and feel.  You could refine the prompt to say “Please, make the your CSS styles generic and should inherit my WordPress theme’s styles”, that way common markup will follow the CSS styles of your existing theme keeping the same look and feel.

Examples of Widgets You Can Create

  1. BMI Calculator: Helps users calculate their Body Mass Index based on height and weight.

BMI Calculator


2. UTM Code Generator: Generates UTM URLs for tracking marketing campaigns.

3. Mortgage Calculator: Assists users in estimating their monthly mortgage payments.

5. Currency Converter: Provides real-time currency conversion rates.

6. FAQ Chatbot: Answers frequently asked questions interactively. Note, you must repopulate your script with questions. For example, we used

    • Question: What are your business hours? Answer: We are open Monday to Friday, from 9 AM to 6 PM.
    • Question: Where are you located? Answer: Our office is located at 123 Main Street, Washington, DC, USA.
      Question: How can I contact customer support? Answer: You can contact customer support at support@example.com or call us at 123-456-7890

Event Countdown Timer: Displays a countdown to upcoming events.

Weather Widget: Shows current weather conditions and forecasts.

Calorie Calculator: Estimates daily calorie needs based on user inputs.

Custom Form Builder: Allows users to create and embed custom forms.

Loan Amortization Schedule: Generates a breakdown of loan payments over time.

Stock Price Tracker: Fetches and displays real-time stock prices.

Health Risk Assessment Tool: Provides insights into health risks based on user inputs.

Time Zone Converter: Converts time between different time zones.

Nutritional Information Lookup Tool: Searches and displays nutritional info for various foods.

Price Comparison Widget: Compares prices of products from different retailers.

Refining Prompts for Specific Requests

To refine your prompts and get more specific results, consider the following tips:

  • Be Detailed: The more details you provide, the better the AI can tailor the code to your needs.
  • Use Examples: Provide examples of the desired outcome to guide the AI.
  • Iterate: If the initial output isn’t perfect, tweak your prompt and try again.

For example, if you need a stock ticker that updates every 60 seconds, you might prompt: “Generate a JavaScript code for a stock ticker that fetches real-time stock prices for selected companies and updates every 60 seconds.”

There you have it. Leveraging AI to create website widgets is a powerful way to enhance your website’s functionality efficiently and cost-effectively. By defining clear purposes, crafting detailed prompts, and refining the output, you can develop a wide range of useful tools that improve user experience and engagement.

Whether you’re creating a simple calculator or an interactive chatbot, AI can help you bring your ideas to life with ease.

Have fun and be patient with your prompts.

Last Updated on September 2, 2024.