Lessons in Working with AI: Building a Smart Bookmarklet with Precision

Working with AI isn’t magic — it’s a collaborative process. You don’t just ask once and get perfection; instead, you iterate, clarify, and build something better with every round. That’s exactly what happened in a recent project where we developed a smart bookmarklet that turns any webpage (or Zoho Desk ticket) into an Outlook Web Access calendar task.

This post shares what we learned, how we worked back and forth with AI, and where we ended up. Whether you’re a developer, a curious tinkerer, or a business leader looking to leverage AI, this story is a blueprint for making it work for you.

Key Lessons from the Experience

1. Start Simple. Then Iterate.

AI works best when you give it a single, clear step at a time. Don’t try to cram everything into one prompt — build layer by layer.

2. Test Often and Give Feedback.

We ran the script, got errors, and clarified. We noticed unexpected behavior and guided the AI to fix it. This cycle made the final output accurate and polished.

3. Clarify Context, Especially for Complex Interfaces.

When working with apps like Zoho Desk or Outlook Web, not everything is accessible through normal means. Knowing that helped shape our approach.

4. Be Willing to Say “That’s Not Quite Right.”

One of the best moves in our process was saying things like “don’t hardcode that name” or “that heading isn’t the one I want.” Specific feedback led to better solutions.

5. Think Beyond the Tool — Prepare to Share It.

We didn’t stop at functionality. We generated blog posts, a marketing graphic, and setup instructions so the tool could be shared with others easily.

What We Built: The One-Click Outlook Task Bookmarklet

The goal was to create a bookmarklet that could:

Detect what page the user is on
Open a popup to create a new Outlook Web Access calendar task
Automatically fill in:
- ✅ The subject line: "TASK: [Page Title]"
- ✅ The body: Includes the title, first <h1>, contact name, link, summary, and first 5 paragraphs
- ✅ An image, if large enough
Schedule the task 4 hours ahead (or next day at 9am if late)
Display in a centered, responsive popup

That’s a lot of functionality packed into one click — and it works.

How We Got There: Step-by-Step Collaboration with AI

Here’s a quick timeline of how the process unfolded:

️ Phase 1: The First Build

We asked AI to:

Take the current page
Open an Outlook Web appointment popup
Use the title + first 3 paragraphs
Set the date/time intelligently

The result: A working start — but it threw a JavaScript error. We pointed it out and AI fixed the syntax.

Phase 2: Layout and Formatting Tweaks

We asked for:

Extra spacing between sections
More paragraphs (5 total)
An <hr> between the intro and content
A responsive popup (min 1024px, max 2048px)
Centered on screen

AI adjusted the popup’s width and position logic, then minified the code for bookmark bar use.

Phase 3: Detect Email Pages in Outlook Web

We wanted to use this while viewing emails in Outlook Web Access. We asked:

“Can it detect if I’m looking at an Outlook email and grab the subject?”

AI confirmed it’s tricky due to how Microsoft renders content in shadow DOMs, but delivered a fallback:

If on outlook.office.com/mail/, pull [role="heading"] as the title
If not available, fallback to “Follow up on email”

Phase 4: Targeting Zoho Desk — Title + Contact Name

Next, we said:

“Pull the real ticket title — not ‘My Open Tickets.’ Also grab the contact name.”

That required more advanced logic:

Ignore generic text like “dashboard” or “open tickets”
Look for headings with words like “ticket,” “issue,” or “request”
For contact, find elements mentioning “Contact” and pull the nearby name

AI rewrote the logic to use heuristics and regular expressions, then minified the final bookmarklet.

Phase 5: Sharing It With the World

To make this usable for others, we asked AI to:

Write a short blog post for our company site
Write a long-form tutorial for chetcromer.com
Generate a 16:9 marketing graphic

Now it’s more than just a tool — it’s a polished, branded solution that others can learn from.

Final Outcome

We now have a bookmarklet that:

Works across websites, Zoho Desk, and Outlook Web
Pulls the right title and contact name
Opens a clean, Outlook task popup
Can be shared with team members via a blog post

Closing Thought: AI Works Best When You Lead

AI isn’t just a button that writes code or content. It’s a partner in the creative and technical process. The better you guide, clarify, and challenge, the better your results will be.

Whether you’re solving a workflow problem, building a tool, or telling a story — think of AI as your collaborator, not your replacement.

Now go make something awesome. I’d love to hear about it.