Writing code with ChatGPT

AI for Creatives: How I Used ChatGPT Beyond Image Creation

Tired of thinking AI is only good for creating art or writing basic content? What if I told you that AI, specifically ChatGPT, can be your personal tech assistant?

This post contains affiliate links. Which means we may receive a commission for any purchases made through our links. As an Amazon Associate I earn from qualifying purchases.  See our full policy. Thank you for reading this post, don'tforget to subscribe!

You can use it to create custom code for your website, even if you don't have a technical background!

Custom pop-ups can be expensive and complicated. I'm going to show you how to use ChatGPT to generate the code for a custom pop-up box on your blog. Get ready to see how accessible coding can be with AI.

The Problem: Custom Pop-Ups Can Be a Headache (and Expensive!)

Pop-up boxes are super useful (and annoying at times, but hey, they work). They let you share the latest news or special promos with your website visitors. There are plugins you can use to make pop-ups. But, many of them are outside a reasonable price range.

I had my eye on Convertbox, but it wasn't an expense I could justify at this time. However, this is where ChatGPT comes in!

My “Business Bestie”: Brainstorming with ChatGPT

I like to talk to ChatGPT like it's a friend or my business bestie. I asked it, “Hey, what if I wanted to add a little popup on my website that shared the latest news, a special product deal offer, or something like that?”

ChatGPT gave me different options. Option number two was more in line with what I was thinking. It's cool how you can just bounce ideas off of it.

AI for Creatives - How to Use AI to help you code custom popups for your website

Want to see me demonstrate this process? Just watch the video below

From Idea to Code: ChatGPT's First Attempt

ChatGPT generated HTML and CSS code for me. To see what the code looks like, click “edit” (Canvas) then “preview.” The initial pop-up box said, “Just dropped! Check out the newest spring printable…”

Side note: If you're looking for some awesome printables, check out the Etsy shop for grab-and-go downloads!

To get back to the code section, just click the “stop” button.

How to Use ChatGPT as your Coding Assistant

Customizing the Pop-Up: Easter Discount Example

I wanted to offer a discount on Easter-themed items. ChatGPT helped me by generating customized code for this specific promotion.

It was an iterative process. I kept working with ChatGPT to refine the code until it was perfect.

Okay, I Have the Code…Now What? (Where to Put It!)

So, you have the code, but how do you actually use it? That's the next question, right? I asked ChatGPT, “Okay, great! Now where would I put the code on my website?”

ChatGPT gave me a few suggestions:

  • Use a WordPress plugin.
  • Paste it directly into the theme (but be careful if you're not familiar with code!).
  • Put it in specific blog posts or landing pages and control when it appears.

» TIP: Just getting started with ChatGPT? Check out this FREE Beginners Guide.

Step-by-Step: Adding the Code to a WordPress Post

I use the Kadence theme on WordPress. Here's how I added the code:

  1. Log in to your website.
  2. Go to a draft post.
  3. Add a “Custom HTML” block.
  4. Copy and paste the code from ChatGPT.
  5. Save the draft.

Keep in mind that the preview won't show the pop-up inside the draft post.

Real-Life Examples: Seeing the Pop-Up in Action

To preview the pop-up, open the draft post in a new window. The finished Easter discount pop-up says, “Hey I got an exclusive Easter discount for you!” It also includes a link along with a special blog reader-only discount code on any of my Easter themed items in my Etsy shop.

It's a special gift I'm giving exclusively to by website visitors.

If someone isn't interested, they can simply click the “X” to close the pop-up.

✨ TIP: Want to see the popup live? Just click to visit this post and scroll down a bit and it should pop right up.

I've also used ChatGPT to help me code special call-out boxes to highlight key products or affiliate offers.

Bonus Tip: Reusable Blocks in Kadence

Reusable blocks can save you a lot of time and effort. To save a block as reusable, just save the block as a pattern.

The purple icon indicates a synced block. Any changes you make to the original block will be updated across all instances across your site. It's a handy time saving resource for content creators.

Beyond Pop-Ups: The Potential of AI for Tech Tasks

AI isn't just for images or basic writing. You can also use it for:

  • Coding
  • Opt-in boxes
  • Website pop-ups
  • Spreadsheet functions

You don't have to be a tech guru to use AI for these tasks! Talk to AI like you're asking a friend for help.

I didn't even think about setting the pop-up to show only during a certain time frame. But ChatGPT suggested it!

For more creative biz tips and real-life ways to use AI in your workflow, be sure to subscribe to the Pretty Cute Press YouTube Channel.

AI – Your Low-Cost Tech Assistant

AI can help you with so many things. It's like having your own personal assistant! You can use it to create custom code for your website, even if you don't have a technical background.

So, next time you're stuck on a tech problem, don't be afraid to ask AI for help.

If you want the exact prompt or the template I used to get ChatGPT to write code for my website, let me know. Until next time, happy creating!

Join dct
dct COMMUNITY

Ready to Learn How to Really Harness the Power of AI

Get the inside scoop on how to craft your digital legacy by tapping into the your creativity, AI, and the power of your personal story.

Similar Posts