Getting Started With Angie Build Custom Widgets With AI

Getting Started With Angie: Build Custom Widgets With AI ![rw-book-cover](https://img.youtube.com/vi/dtAdaRDGdfU/maxresdefault.jpg) 🔗 **Source:** [Getting Started With Angie: Build Custom Widgets With AI](https://www.youtube.com/watch?v=dtAdaRDGdfU) > [!note]+ Document Notes > tags: #wordpress #artificial-intelligence #elementor #web-development #woocommerce > author: Zim and Miriam > source: Elementor > reference: https://www.youtube.com/watch?v=dtAdaRDGdfU > date created: 2024-12-19 14:30 > > # 🏷️ Title: Getting started with Angie: build custom widgets with AI (webinar replay) >  ## 🧰 Action Inbox - [H1] Install Angie plugin from WordPress repo — free AI widget generator #wordpress - [H2] Test breadcrumbs widget creation for SEO improvement — 5-10 minute process #elementor - [H3] Explore prompt library at prompts.elementor.com — pre-tested prompts available #artificial-intelligence ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Angie Plugin](https://wordpress.org/plugins/angie/) - [Prompt Library](https://prompts.elementor.com) - [Elementor](https://elementor.com) ## 📝 Summary - Elementor released Angie, a free AI plugin for WordPress that creates custom widgets through conversational prompts - Works on any WordPress site regardless of hosting or theme, integrates seamlessly with Elementor - Features sandbox test mode for safe development and one-click publishing to live sites - Demonstrates creation of breadcrumbs widget, WooCommerce cart, and image gallery in minutes - Eliminates need for complex API integrations or expensive custom development ## 📖 Main Content Angie is a generative AI plugin for WordPress that sits directly in the admin dashboard, enabling users to create custom widgets through natural language conversations. Unlike other AI solutions requiring API configurations, Angie works immediately after plugin installation from the WordPress repository. The plugin includes a test mode with visual indicators (pink borders) that creates a sandbox environment, allowing users to experiment safely without affecting live sites. All generated code remains in draft status until explicitly published. Key technical features include automatic detection of site setup (Elementor integration), widget generation with custom controls, and a snippet management system. The plugin generates actual PHP code for widgets but abstracts complexity through the conversational interface. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/dtAdaRDGdfU?t=0) — [H1] Introduction to Angie AI plugin - Key idea: Angie is generative AI that sits in WordPress admin for widget creation - Evidence: "If you can install a plugin, then you can install Angie. It's in the repo, free to use" #### ⏱️ [02:30](https://youtu.be/dtAdaRDGdfU?t=150) — [H2] Universal WordPress compatibility - Key idea: Works on any WordPress site regardless of hosting or theme setup - Evidence: "Doesn't matter where your site is hosted, and it doesn't matter if you're using Elementor" #### ⏱️ [04:15](https://youtu.be/dtAdaRDGdfU?t=255) — [H3] Plugin installation process - Key idea: Standard WordPress plugin installation through admin dashboard - Evidence: "Go to plugins my sites...search for Angie...click on it and you can learn about it" #### ⏱️ [06:45](https://youtu.be/dtAdaRDGdfU?t=405) — [H1] Breadcrumbs widget creation demo - Key idea: Breadcrumbs improve SEO and site navigation hierarchy - Evidence: "It's good for SEO, search engine optimization...good for the bots that are trying to figure out how to index your site" #### ⏱️ [09:20](https://youtu.be/dtAdaRDGdfU?t=560) — [H2] AI prompt optimization strategy - Key idea: Asking AI to ask clarifying questions improves results and efficiency - Evidence: "The more information AI has at the beginning of the process, the better the outcome will be and also the faster" #### ⏱️ [12:00](https://youtu.be/dtAdaRDGdfU?t=720) — [H3] Widget generation process - Key idea: Angie creates Elementor-compatible widgets with custom controls - Evidence: "It understands your setup...creates custom code which is either expressed in a custom widget" #### ⏱️ [15:30](https://youtu.be/dtAdaRDGdfU?t=930) — [H1] Test mode safety features - Key idea: Pink indicators show sandbox mode protecting live site from changes - Evidence: "This protects us from ourselves...all the code changes that are happening now are happening in a closed environment" #### ⏱️ [18:45](https://youtu.be/dtAdaRDGdfU?t=1125) — [H2] Automatic control generation - Key idea: AI adds useful features beyond basic requirements - Evidence: "Often it will add some really nice features that I didn't even think of that are helpful" #### ⏱️ [21:10](https://youtu.be/dtAdaRDGdfU?t=1270) — [H3] Snippet management system - Key idea: Central dashboard shows all Angie-generated widgets and their status - Evidence: "You can get a bird's-eye view basically of its status and switch them on and off" #### ⏱️ [24:30](https://youtu.be/dtAdaRDGdfU?t=1470) — [H1] WooCommerce cart widget demo - Key idea: Complex ecommerce functionality can be generated through detailed prompts - Evidence: "Carts can often be the difference between someone buying your thing and not buying your thing" #### ⏱️ [27:15](https://youtu.be/dtAdaRDGdfU?t=1635) — [H2] Prompt library resource - Key idea: Pre-tested prompts available at prompts.elementor.com - Evidence: "We have a prompt library...these prompts that you can just copy the prompt text into Angie" #### ⏱️ [32:00](https://youtu.be/dtAdaRDGdfU?t=1920) — [H3] Custom benefits and payment options - Key idea: Generated widgets include thoughtful features like benefit lists and payment icons - Evidence: "Benefits, free standard delivery, easy returns...it shows you Visa, MasterCard and PayPal" #### ⏱️ [35:45](https://youtu.be/dtAdaRDGdfU?t=2145) — [H2] Reference-based prompting - Key idea: Including URLs or examples in prompts improves AI understanding - Evidence: "Sometimes it can be hard to describe in words what you want to do...I can be like, take a look over there. Build me that" #### ⏱️ [39:30](https://youtu.be/dtAdaRDGdfU?t=2370) — [H1] Moving gallery widget creation - Key idea: Complex interactive galleries generated with styling controls - Evidence: "This very snazzy gallery, which is a really great way to display images, products, projects" ## 📚 References - [Angie WordPress Plugin](https://wordpress.org/plugins/angie/) - [Elementor Prompt Library](https://prompts.elementor.com) - [Elementor GitHub](https://github.com/elementor/elementor) ## 🗣️ Paraphrase - Angie democratizes custom widget development by eliminating coding barriers through conversational AI - The plugin's safety features and test mode enable risk-free experimentation on live WordPress sites - Integration with Elementor creates professional-grade widgets with styling controls and responsive design ## 📰 Newsletter 🚀 **AI-Powered Widget Creation Comes to WordPress** Elementor's new Angie plugin brings generative AI directly to your WordPress dashboard, making custom widget creation as simple as having a conversation. No API keys, no complex setups—just install the free plugin and start building. **Key Benefits:** - Create breadcrumbs, galleries, and WooCommerce widgets in minutes - Test mode protects your live site while experimenting - Works with any WordPress hosting or theme setup - Pre-tested prompts available for instant results **Getting Started:** Install Angie from your WordPress admin, activate it, and click the Angie button on any page to begin creating. The prompt library at prompts.elementor.com offers ready-made examples to jumpstart your development. Resources: [WordPress Plugin Directory](https://wordpress.org/plugins/), [Elementor Documentation](https://developers.elementor.com/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate AI integration patterns for official recommendation - Community: Create guidelines for AI-generated code in plugin directory - Documentation: Develop best practices for AI-assisted development - Training: Build curriculum for AI-enhanced WordPress workflows - Accessibility: Review AI-generated widgets for WCAG compliance #### Community - Contributors: Test Angie with various themes and hosting environments - Maintainers: Document compatibility requirements for AI plugins - Sponsors: Evaluate investment in AI tooling for WordPress ecosystem #### OSPO - License Compliance: Review AI-generated code attribution requirements - Security Management: Establish scanning protocols for AI-generated widgets - Developer Support: Create training materials for AI-assisted coding ## 🧪 Hypotheses - AI-generated WordPress widgets will match or exceed hand-coded quality within 12 months - Conversational interfaces will become standard for WordPress customization by 2025 - Test mode features will reduce plugin-related site crashes by 40% - AI democratization will increase custom widget usage among non-developers by 300% ### 📊 Methodology - Compare AI-generated vs manually coded widgets for performance, accessibility, and security - Survey WordPress developers on AI adoption patterns and concerns - Measure test mode effectiveness through error rate reduction analysis ### ❓ Questions - How will AI-generated code impact WordPress security review processes? - What licensing implications exist for AI-trained on GPL code? - How can we ensure AI-generated widgets maintain accessibility standards? ### 🔮 Future Research - Cross-platform AI widget compatibility (Gutenberg, other page builders) - Integration patterns for AI assistants in WordPress core - Performance optimization techniques for AI-generated code ### 💡 Implications - Practice: Custom development timelines compressed from days to minutes - Policy: Need for AI-generated code review standards in plugin directory - Security: New threat vectors from automated code generation require monitoring - Education: Developer curriculum must include AI-assisted coding practices - Funding: Traditional custom development business models may need restructuring ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade (conversational, technical but accessible) #### 👀 Visual learners - Present: Live demo screenshots, widget examples, UI mockups - Improve: Architecture diagrams showing AI workflow, visual comparison charts #### 🔊 Aural learners - Present: Full webinar video with clear narration - Improve: Audio-only version, podcast summary format #### 🗣️ Verbal learners - Present: Conversational explanations, analogies (Hansel and Gretel breadcrumbs) - Improve: Glossary of AI terms, step-by-step written instructions #### 🧩 Kinesthetic learners - Present: Live coding demonstration, interactive plugin testing - Improve: Hands-on workshop format, downloadable test environment #### 🧠 Logical learners - Present: Clear workflow steps, before/after comparisons - Improve: Decision trees for prompt optimization, performance metrics #### 🧑‍🤝‍🧑 Social learners - Present: Live Q&A format, community chat engagement - Improve: User forums, collaborative prompt sharing #### 🧘‍♀️ Solitary learners - Present: Self-paced video content, written documentation - Improve: Individual practice exercises, reflection prompts #### 🌿 Naturalistic learners - Present: Organic development process, iterative improvement - Improve: WordPress ecosystem analogies, natural language processing explanations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive button labels - Improve: Alt text for demo screenshots, transcript formatting #### Keyboard navigation - Present: Standard WordPress admin keyboard support - Improve: Verify Angie interface keyboard accessibility #### Contrast and readability - Present: Standard video quality, clear audio - Improve: High contrast mode testing, subtitle customization #### Text resizing and reflow - Present: Responsive video player, scalable interface - Improve: Mobile accessibility testing for AI interface #### Media and captions - Present: Full video with clear audio - Improve: Professional captions, downloadable transcript #### Forms and interactions - Present: Accessible WordPress admin integration - Improve: Voice input testing, screen reader compatibility for AI chat ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal WordPress compatibility discussion - Improve: Multi-language AI support examples, global use cases #### Inclusive language - Present: Gender-neutral technical terms, welcoming tone - Improve: Avoid assumptions about technical skill levels #### Neurodiversity support - Present: Multiple explanation methods, patient demonstration pace - Improve: Sensory considerations for AI interface design #### Representation - Present: Mixed gender presentation team - Improve: Diverse business examples beyond jewelry sites #### Psychological safety - Present: Emphasis on safe testing environment, encouragement to experiment - Improve: Address AI anxiety, normalize learning curve ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Plugin installation leads to AI capabilities (demonstrated) - Inductive strength: Multiple widget examples suggest broader capabilities - Causal reasoning: AI prompts directly generate functional widgets - Analogical strength: Breadcrumbs comparison to Hansel and Gretel effective #### Fallacies - Appeal to novelty: Positioning AI as automatically better without comparison data - Hasty generalization: Limited demos may not represent all use cases #### Tone of voice - Overall tone: Enthusiastic but educational, acknowledging AI limitations and risks ### 🛡️ DARVO Analysis - Deny: No defensive patterns observed - Attack: No attacks on traditional development methods - Reverse victim/offender: Not applicable - Emotional cues: Positive excitement about technology, honest about limitations ## 🎯 Conclusion Angie represents a significant democratization of WordPress customization, enabling non-developers to create sophisticated widgets through natural language. The plugin's integration of safety features, particularly test mode, addresses legitimate concerns about AI-generated code quality. For the WordPress ecosystem, this signals a shift toward AI-assisted development that could accelerate innovation while requiring new standards for code review and quality assurance. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] AI democratizes WordPress widget development through conversation > [!quote] [Getting started with Angie: build custom widgets with AI](https://www.youtube.com/watch?v=dtAdaRDGdfU) by [[Zim and Miriam]] via [[Elementor]]. Published 2024. Accessed 2024-12-19. > "If you can install a plugin, then you can install Angie. It's in the repo, free to use." Angie eliminates technical barriers to custom WordPress development. [view highlight](https://youtu.be/dtAdaRDGdfU?t=150#H1) #xref #articleseed ID:rw_angie_democratization ### [H2] Test mode provides safety for AI-generated code experimentation > [!quote] [Getting started with Angie: build custom widgets with AI](https://www.youtube.com/watch?v=dtAdaRDGdfU) > "This protects us from ourselves...all the code changes that are happening now are happening in a closed environment." Sandbox features address primary concern about AI code quality risks. [view highlight](https://youtu.be/dtAdaRDGdfU?t= --- ## Full Transcript [00:00] Hi and welcome to our live Angie [00:03] webinar. I'm Zim and this is Miriam. [00:05] Hello. It's nice to be here. And um what [00:09] are we doing? [00:10] What are we doing? Well, [00:12] we are going to talk about Angie, [00:16] which is our genetic AI for WordPress, [00:18] and do some live demos of what it can do [00:21] for people who want to use it in their [00:23] WordPress site. And I would like to add [00:25] that doing live demos is very brave. So, [00:28] kudos to us for our bravery. [00:30] >> Absolutely. Um so, Miriam, can you just [00:33] uh explain quickly what exactly is [00:35] Angie? [00:36] So, Angie is a genetic AI that sits in [00:40] your WordPress admin with you, by your [00:42] side. Um and it's there to give you AI [00:46] capabilities right there uh without [00:48] having to [00:50] hook together APIs or activate things [00:53] that might be complicated. If you can [00:55] install a plugin, then you can install [00:57] Angie. It's in the repo, free to use, [00:59] and then you [01:02] are ready to go with uh with AI in [01:03] WordPress. And what does that mean? It [01:06] means that you can do things with Angie [01:08] that maybe in the past would have been [01:09] complicated for you to use or you may [01:11] have hesitated to do or hesitated to do [01:13] or it would have been expensive. Like [01:15] developing customized widgets for [01:17] specific needs that you have or your [01:19] customer has or anything like that. Um [01:22] Angie can build it for you very quickly [01:23] and uh all you have to know how to do is [01:26] type and chat with it. All right, so [01:28] sounds very cool and then [01:30] So, basically it just works on any [01:31] WordPress website. Um and uh what we're [01:34] going to be doing is we're going to be [01:36] doing this live uh webinar series where [01:38] we're going to be just sharing uh use [01:40] cases uh and showing you how it works. [01:43] Um there really are a lot of uh [01:45] different types of functionalities and [01:47] widgets and and and all lots of stuff [01:49] um we can do with our WordPress [01:51] websites. And um I want to invite [01:54] everybody to uh in the live chat, if you [01:56] got any ideas or anything you want to [01:58] build or a custom widget that you [02:01] thought of uh or something like that, [02:03] just share it in the live chat and we'll [02:05] take it on. Miriam is very brave and um [02:08] but we have prepared a couple of uh [02:10] examples that we wanted to show you uh [02:12] >> [clears throat] [02:12] >> you know, what you can do with it. Um [02:14] so, Miriam, I'm going to be sharing the [02:15] screen and please uh go ahead, let's [02:18] let's uh make a start. All right, so [02:20] here we go. Um I'm excited to do this [02:22] live because I want to us to show what [02:25] the real experience is. And so, when [02:28] you're working with AI, things can go [02:30] smoothly, go less smoothly, not just [02:32] with Angie. Um [02:34] but the results can be quite amazing. I [02:36] just want to mention something about [02:38] what sites you can use it on. So, you [02:40] said you can use it on all all WordPress [02:42] sites and I want to elaborate on that. [02:43] Doesn't matter where your site is [02:44] hosted, and it doesn't matter if you're [02:47] using Elementor, actually. But um Angie [02:49] can work on all sites and like we said, [02:52] it's available in the repo, so if you [02:54] have a WordPress site, you can install [02:55] it and you can get going. [02:57] Um and there's no limitations there. So, [02:58] it understands your site, your setup, [03:00] and it creates these uh custom code, [03:03] which is either expressed in a custom [03:05] widget or other functionality, and it [03:07] works uh directly on your website. Um [03:09] so, what have you prepared over here? [03:11] This looks like a very nice jewelry [03:13] website. [03:14] >> Yes, I'm quite an amazing website [03:16] builder. Just kidding. I can build [03:18] websites, but I didn't build this one. [03:19] >> one? [03:20] >> No, it's actually an Elementor uh [03:23] template. [03:24] So, anyone can install it. [03:26] >> Um and this is a jewelry site, so it's [03:29] also [03:33] And we're going to develop some custom [03:35] code for the site. So, first I just want [03:39] to go into [03:41] um [03:42] >> [clears throat] [03:42] >> I want to just show you what Angie looks [03:44] like when you're in the site. So, just [03:45] so you can get an idea of the experience [03:47] and environment. So, [03:49] Angie can be toggled open and [03:52] and from here, sometimes you want it to [03:55] be open with you while you're working so [03:57] that it can accompany you on your work. [03:59] And sometimes you want to collapse it so [04:00] that you can see things, you know, in [04:02] their complete picture. [04:04] >> And this is you you've you've installed [04:06] the plugin, you've activated it, and now [04:07] you can just click Angie on any [04:09] WordPress page [04:11] where you are and you'll be able to [04:12] access that. [04:13] >> Exactly. I'll just show you where it is [04:14] in the plugins area. [04:18] Um you go to plugins [04:22] my sites, and here's Angie. [04:24] Um [04:26] I don't have it yet, so I would go to [04:28] the add plugin area, which is in all [04:30] WordPress sites, and I would just search [04:32] for Angie. [04:35] And there it is. [04:36] And you can click on it and you can [04:37] learn about it. [04:39] Um you can also find it on [04:40] wordpress.org, the same content. And [04:42] then if you didn't have it installed yet [04:44] down here, [04:47] and then activate it. But as we all [04:49] know, [04:49] >> Right. And then once you activate it, [04:50] then you'll be able to access that. [04:51] >> Then you can already get going and it's [04:53] all ready for you. So, [04:55] um let us [04:57] I just want to Okay, yeah. So, [05:00] um I'm going to just share this [05:02] screen or to show you guys something. [05:05] We have uh a GitHub repo [05:08] and we get a lot of uh requests for [05:11] functionality from users. [05:13] And which is great. We love the [05:14] engagement and we love that people want [05:16] Elementor to do more. Um [05:19] Now with Angie, we can take some of [05:21] these examples and just build it out um [05:23] for the site and So, this is this is a [05:26] breadcrumbs widget uh request on uh [05:28] GitHub and um you're going to show us [05:31] how Angie can create a widget. [05:33] >> Yes. [05:33] A breadcrumbs widget. Exactly. So, we're [05:35] going to build a breadcrumbs widget for [05:36] the site. Uh breadcrumbs widget is [05:39] useful because um it can help [05:42] >> sorry, yeah, what is it? [05:43] What is a breadcrumbs widget? [05:44] >> Yes, it doesn't have to actually do with [05:46] bread or crumbs. Okay. But why is it [05:49] called that? Because it gives you an [05:50] idea of where you are in the site. Like [05:53] it leaves crumbs. So, like Hansel and [05:55] Gretel's crumbs. Exactly, but with a [05:57] happier ending. Okay. Actually, maybe [05:59] they had a happy ending, I don't [05:59] remember. But [06:00] >> a glass of milk at the end. Probably. [06:02] And cookies. [06:03] >> Cookies and milk. [06:04] >> always a happy ending. So, [laughter] [06:05] yeah. So, it it tells you like um if you [06:08] have subpages, it will show you the [06:10] hierarchy of the site and then it helps [06:11] you like know where you are within the [06:13] site, especially that's especially [06:15] helpful with larger sites. It's also [06:16] good for SEO, search engine [06:17] optimization. [06:18] >> Indexing. [06:19] >> It's good for the bots that are trying [06:21] to figure out how to index your site. It [06:22] gives them [06:23] another indication of the architecture [06:26] of the site and the content. [06:27] >> Yeah. And I'm guessing and theorizing, I [06:30] don't know, but today in today's world, [06:34] there's actually two audiences for your [06:35] site. Humans, like us who are visiting, [06:37] but also the LLMs, the AI large language [06:40] models that are [06:42] trying to view your site and understand [06:43] what it's about as well. [06:44] >> Right. So, because of that we want to [06:46] make our site as user-friendly as [06:48] possible for them also. I'm guessing [06:50] that having that kind of navigation can [06:52] help with that as well. I don't know for [06:53] sure, I'm just theorizing. So, [06:56] we're going to ask Angie [06:57] to make us a breadcrumbs widget. [07:00] And the [07:01] experience here is very similar to if [07:03] you've ever used any AI chat. [07:05] >> I think let's click on share this tab [07:07] instead. There we go. Good idea. So, now [07:09] everybody's back. Okay, cool. So, now [07:11] we're going to create the widget and [07:13] it's um very similar experience to [07:16] chatting with any um [07:19] AI. So, one second, I have to edit this [07:20] Elementor. [07:23] >> [snorts] [07:25] >> And I'm going to say, [07:27] "Hi Angie. [07:29] You don't have to be friendly with [07:30] Angie. [07:31] Ah, but it's But it's you know, if the [07:33] bots ever take over the world, they'll [07:34] be nice to me because I said please and [07:36] thank you, you know. So, like Miriam was [07:37] nice. So, "Hi Angie. Quid pro quo. Yeah. [07:40] Um please, I'll say please, create [07:44] a breadcrumb [07:46] widget [07:47] for my site." [07:49] Now I'm going to do something that I um [07:51] I always do when I'm working with AI, [07:53] which is I'm going to tell it to ask me [07:55] qualifying questions. Because the more [07:58] information AI has at the beginning of [08:01] the process, the better the outcome will [08:03] be and also the faster and therefore [08:05] cheaper the outcome will be. And so, it [08:07] makes it much more efficient. So, [08:09] >> you're going to ask it to help you like [08:11] guide [08:12] >> help it. Like [08:13] >> Oh, okay. I want it to if this is [08:15] probably enough information and could do [08:17] a very good job with it, but I want to [08:18] make sure it has all the information [08:20] that I need. So, "Ask me any questions [08:23] you may have about this task." [08:27] So, let's see what it asks me. All [08:28] right. All right. Exciting. [08:31] It's thinking. [08:33] It's thinking about how nice I am [08:35] and friendly and polite. All right. [08:38] Clarifying. Okay, how should the [08:40] breadcrumbs look on your page? Simple [08:42] horizontal list, a styled bar with a [08:44] background color and border, fancy, [08:46] a minimalist design using only text and [08:48] separator. [08:49] I'm going to go with styled. Just that [08:51] sounds fun. Continue. [08:53] Which symbol should separate the links? [08:55] Also a good question. [08:57] Let's do that. [08:59] Continue. [09:02] I'd love to help you create a [09:03] breadcrumbs widget for Lando Jewelry. [09:05] Thank you, Angie. [09:07] Please go ahead and create a [09:11] breadcrumb [09:13] widget. All right, here we go. [09:21] Like in other AI tools, it shows you [09:25] kind of the thinking behind the scenes, [09:26] the process that it's going through to [09:28] create this breadcrumbs widget for me. [09:31] Um So, you can see what it's doing in [09:34] the background. It's got a set of uh [09:36] tasks. [09:37] Um you can see it there. What does it [09:39] say? Create a new Elementor widget [09:40] snippet. Yeah. And then generate and [09:43] save the breadcrumb code. [09:44] >> So, [09:44] Angie understands your setup, [09:46] understands that um this is a an app a [09:49] website built with Elementor. And what [09:50] it's going to do now is going to create [09:52] uh a breadcrumb widget based off uh uh, [09:55] the Elementor code base. Exactly. So, [09:57] it's based off of the magical base. I [10:00] asked it to create a [10:02] a widget. It I think it knows it means [10:04] Well, actually said it will create an [10:05] elemental widget for me, which is [10:07] perfect for my site. Yeah. Um Which [10:09] means that we'll be able to drag and [10:11] drop and and and style and edit [10:14] um whatever way we like. [10:16] >> Yeah. Um [10:18] And then we could even add like an [10:19] animation of like some, you know, We can [10:21] do wild and wacky things. [10:22] >> yeah. We should [10:24] we try that? Flippy. Let us see. Okay. [10:26] So, now it says reload is required. [10:29] Um [10:30] this is something that in like a release [10:33] that's coming soon, it will just happen [10:34] automatically. So, there's no need to [10:36] reload. [10:36] >> You don't have to click reload button. I [10:37] think I can click click reload. It's [10:39] fine. So, here we go. Reload. [10:41] Yes. [10:46] All right. [10:48] So, now a few things have happened. [10:50] First of all, I just want to point out [10:51] that if you notice there's this Angie [10:53] test mode button at the top. It's very [10:55] very apparent. Very pink. [10:58] And there's actually also a pink square [11:00] around the frame. So, this is all to [11:03] indicate that we're in a kind of sandbox [11:05] test mode. [11:06] Which is great. [11:07] >> What does it mean exactly? It means that [11:10] essentially what we're doing now is [11:12] what's called cowboy coding, which is [11:13] we're coding on a live site, which is [11:16] generally not recommended. [11:18] So, this protects us from ourselves, [11:20] which is by making sure that all the [11:22] code changes that are happening now are [11:24] happening in a closed environment that [11:27] if someone's visiting my site now, they [11:28] won't see it. Okay. They're not going to [11:30] see the breadcrumbs. And if for some [11:32] reason something breaks, which can [11:33] happen, [11:34] the the live site and the visitors, it [11:36] will not affect them. So, this is a like [11:38] gives me the security to test out [11:40] changes on my site without worrying how [11:42] it'll impact the live production site. [11:45] So, we can see it created the [11:47] breadcrumbs widget right here. Very [11:49] nice. [11:50] And it's in draft mode because we [11:51] haven't published to the live yet. Yes. [11:53] Um I am going to add it to my site [11:58] in this container. [12:00] And [12:03] drag it in there and there we go. Our [12:05] breadcrumbs. breadcrumbs. Our site is [12:07] now SEO friendly and human friendly. [12:10] Nice. So, that's in in a matter of [12:12] minutes a matter of turn it into a [12:14] custom widget with breadcrumb [12:16] functionality [12:17] uh with the content style and all this [12:18] stuff where you can style it [12:21] uh to your liking. And, you know, let's [12:22] say you want to change something over [12:24] give it another a controller or [12:26] something like another field uh to [12:28] customize, you would just ask Angie to [12:30] add that and it would add that to uh to [12:32] the code. [12:33] >> Yeah. And um okay, so this is a great [12:36] this is a very nice uh use case. Let's [12:38] just look at some of the controls that [12:39] it added. [12:40] >> Yes. [12:40] >> One of the nice things that it does is I [12:43] told it what I wanted it to do. It asked [12:44] me some qualifying questions. [12:46] But often it will add some really nice [12:49] features that I didn't even think of [12:50] that are helpful to me um when managing [12:52] my site. [12:54] So, let's see what we have here. We have [12:55] regular styles, [12:57] advanced, motion effects, [13:00] and the content. So, I can change the [13:01] separator. I know we said that I wanted [13:03] Oh, actually I didn't want that. [13:06] Yeah, I [13:07] >> [clears throat] [13:07] >> love demos. [13:08] Actually, [laughter] I remember you. [13:10] There you go. [13:12] But I can change it and I can make the [13:13] home text um something that's more SEO [13:15] friendly, Lando Jewelry. [13:18] Um show current title, [13:20] etc. [13:22] That's an interesting and nice touch [13:24] that I wouldn't have thought of [13:25] um that it added. Very cool. Very cool. [13:28] And at this point I can choose to either [13:30] publish it to live, and that means it [13:32] will be on the live site, or I can just [13:34] go out of Angie test mode, and maybe I [13:36] want to do some more work on it. I'm not [13:37] ready to publish it yet. I want to go [13:39] out of Angie test mode and show you what [13:41] happens. Okay. [13:43] So, [13:46] reloading cuz, you know, reloading is [13:48] important. Yeah. [13:49] And [13:51] let's go look at [13:54] where this is stored on the site in [13:56] general. So, if we go to Angie snippets, [14:02] here's my breadcrumb widget. All right. [14:04] And you can see that it's in sandbox [14:06] only because I didn't choose to publish [14:07] it. Yeah. [14:09] Um and if I'm ready to publish it, I can [14:11] actually just do it from here, which is [14:13] very cool. So, you got an overview of [14:15] all of your uh your Angie snippets. They [14:17] could be either elemental widgets or [14:19] they could be other WordPress [14:20] functionality. And you can get a [14:22] bird's-eye view basically of its status [14:24] and um switch them on and off and stuff. [14:27] >> Exactly. [14:28] Something interesting for people who [14:30] like to look at code just as an FYI, if [14:32] you go into edit, and I don't recommend [14:34] editing unless you feel comfortable [14:36] doing that, you here's the the code [14:38] behind it. So, that's that's very cool. [14:40] And then also from here I can push it to [14:41] production. It tells me the status, when [14:44] it was created and everything. So, [14:46] that's pretty cool and useful [14:48] functionality. Great. Great. [14:50] >> Yeah. All right. I just want to uh [14:52] quickly uh mention once again that uh [14:55] please feel free to ask any questions in [14:56] the chat. [14:58] Uh we can go ahead and and answer them. [14:59] And also if you've got any uh use case [15:01] or things that you'd like us uh to show [15:02] you, uh please go ahead and ask uh that [15:05] in the chat as well. Um and Miriam, [15:08] what is your [15:11] uh demo? Okay. So, the next one's [15:14] complicated. Okay. [15:15] >> So, we're really going to have to [15:18] the background while waiting it, but [15:19] it's very cool, so it's worth it. So, [15:22] hang on everyone. Just be a little [15:23] patient, okay? Okay. So, [15:26] it's a WooCommerce site, right? Yes. Um [15:28] I'm going to go into the Angie's new [15:30] cart page. Oh. [15:35] I'm going to create a custom [15:38] WooCommerce site, which is pretty [15:39] complicated thing to do. Yeah. Also [15:41] really important, carts can often be the [15:44] difference between someone buying your [15:45] thing and not buying your thing. And in [15:47] the end, we want people to buy our [15:50] So, this is a very long prompt [15:54] um which I'm going to paste in here. [15:56] Obviously, [15:58] now why was it prepared? [16:01] So, [16:02] when you're working on something more [16:03] complex with AI, you do want to prepare [16:06] it as much as possible. [16:08] So, somewhat similar to what I did with [16:10] the breadcrumbs where I said ask me [16:11] questions, Mhm. this was uh prepared in [16:14] another LLM with the ChatGPT where [16:17] um we went through a process with the AI [16:20] to create a very detailed prompt. Yeah. [16:22] Um it doesn't take long to do that, and [16:26] you can ask AI to ask you questions to [16:27] make sure that it's getting all the [16:28] information. But the better the prompt [16:31] is that you bring in here, the better [16:32] the results, and the faster you will get [16:33] the results. And less tweaking after [16:35] everything. So, this is quite a long um [16:38] And we have prompts uh available as well [16:40] in the prompt library. Yeah. So, it's [16:41] actually a really cool resource. We have [16:42] a prompt library. It's at [16:44] prompts.elementor.com. [16:46] And it's all these prompts that um [16:49] you can just copy the prompt text into [16:52] Angie, and it will generate whatever it [16:54] is for you. So, if you don't feel like [16:56] working on the prompt, [16:59] okay, then those are [17:00] pretty well tested, and so you can [17:02] >> Or if you want to get some insights in [17:03] how prompts, you know, good prompts look [17:05] like and inspiration. [17:06] >> And and some ideas. Yeah, inspiration. [17:07] One of the challenges with AI is that [17:09] because it's like all-knowing and [17:11] all-doing, it's often hard to figure out [17:13] where to start. It's kind of like [17:14] [clears throat] [17:15] the ultimate blank slate. So, do you [17:17] perhaps would you like to press just, [17:19] you know, generate one of the prompts [17:21] just and then save it in the background? [17:22] So, maybe I mean, it might take a minute [17:24] All right. All right. Otherwise, we'll [17:25] really have to have the AI. [17:26] >> [laughter] [17:26] >> Okay, but here we go. [17:28] Uh [17:29] This is very great. [17:31] Uh but sorry, where were you? Um yeah, [17:33] so [17:35] So, here it [17:37] See it thinking. Um [17:39] with AI it can be hard to figure out [17:41] what you want it to do with your site. [17:42] There's also a bit of a fear factor [17:44] where people can be afraid to try stuff. [17:46] It might break. [17:48] Time, that's definitely a legitimate [17:50] concern. Um trying to figure out but [17:53] I highly encourage [17:56] the things that AI can do for you are [17:57] amazing. Time-saving even if you have [17:59] the capabilities, [18:01] there's a lot of stuff that we don't [18:01] really want to sit and spend time doing. [18:04] Um and if you don't have the [18:05] capabilities, you now have a superpower. [18:07] It can feel often like a superpower. So, [18:09] um [18:10] so here as well in the prompt library [18:12] can help you like really get started. [18:13] And it's worth, [18:15] you know, if you don't want to test it [18:16] on your live production site, you can [18:18] have a staging site or a local site, and [18:22] start testing out like just prompt stuff [18:24] and see what happens and Yeah. So, [18:26] things that you'd uh you know, [18:29] uh [18:30] uh to custom develop stuff where you can [18:32] go ahead and try it out and see if you [18:33] can do things yourself. Um Yeah. [18:38] This is uh uh [18:40] >> [clears throat] [18:42] >> It's going to create [18:43] custom cart. cart widget. Yes. Okay. [18:47] Okay. The cool thing about the approach [18:49] of creating widgets for like almost [18:50] everything is that widgets are super [18:52] flexible. They can go anywhere, right? [18:54] So, once you have that widget, just put [18:56] it wherever makes sense for you, and you [18:58] can reuse it. [19:00] Reload time. All right. There we go. [19:02] Okay. And we got this nice test mode [19:04] going. [19:05] Yeah, let's see. [19:07] So, here's our model. [19:09] Let's just see what it told us. I built [19:11] a two-column WooCommerce cart widget [19:12] with customizable benefits. I'm [19:14] interested to see what customization um [19:16] it is offering us. It'd be cool. [19:19] And let us [19:22] drag it in. [19:27] All right. So, here is our cart. [19:31] Yeah, how can I see more of it? [19:34] Uh you know what? I'm just going to [19:35] actually do that for now for a second. [19:37] Yeah. Okay. So, here's our two-column [19:40] cart. [19:41] And let [19:43] That's interesting. So, first of all, we [19:44] can change the cart title [19:47] by my jewelry. [19:51] The summary it can be total or [19:54] total cost. You know, you can make it [19:57] whatever you want. Proceed to checkout. [19:59] Um, you can have AI even help you. [20:03] Let's see what else it's offering. [20:04] Benefits. So, you can add benefits to [20:07] this. We didn't I didn't think of this. [20:10] Benefits, free standard delivery, easy [20:11] returns. And you can have So, down here [20:14] it shows you Visa, MasterCard and [20:16] PayPal. I don't take PayPal. Buy PayPal. [20:19] And it's updated. And again, we're in [20:21] Angie test mode, so um [20:24] no risk. [20:26] Just trying it out and seeing how it [20:28] goes. And this widget is uh of course it [20:30] just uh works uh with uh the WooCommerce [20:32] installation that you have the checkout. [20:34] Exactly. And uh [20:36] And it's ready to go. And this would [20:38] have been pretty complicated to build. [20:39] So, even though [20:41] we had to wait a little bit for this to [20:43] be ready, if you think about how much [20:45] time it would have taken to develop this [20:47] without AI. I mean, we just [20:50] which is fantastic. [20:52] So, should we do one more? Yeah, I think [20:54] let's see we've got some time. Yeah, [20:55] let's do one more. Okay. [20:58] Um, let's do [21:01] description text. So, this is [21:04] maybe not [21:05] the most useful thing. [21:07] But, sometimes you want to do fun [21:08] things. [21:11] I think this we can give you an example [21:13] of [21:14] you can do. [21:16] So, um [21:17] here's my prompt. [21:19] It's a description text text effect. [21:21] Okay. Um, which you will see what that [21:23] means. And actually [21:26] changing my mind. I want to use a [21:27] different example. Okay. [laughter] All [21:30] right. It's cool, believe me, you can do [21:32] it. But, I like this example a [21:35] So, in this example, I'm including a [21:37] link to an example [21:39] of what I want Angie to build for me, [21:41] which is great. Like, sometimes it can [21:43] be hard to describe [21:45] in words what you want to do. [21:48] >> But, like here's an example. I love [21:51] gallery. It's gorgeous. And I want the [21:54] same thing. Yeah. So, instead of trying [21:56] to be like I have images horizontally [21:58] aligned la la Yeah. I can be like, take [22:00] a look over there. Build me that. Let's [22:02] see how that goes. [22:04] Um, and you can do that with all sorts [22:06] of things that you want to reference. [22:07] Styling, [22:09] you know, functionality, I don't know, [22:11] anything. [22:12] >> add [clears throat] like URLs [22:15] load some files as well. I think so. [22:18] Yeah. And that all makes the [22:20] communication much easier. Um, because [22:23] AI can see stuff. Right. And then uh [22:26] and then use that as part of the prompt. [22:29] Um, so [22:31] Angie's [22:32] Oh. There we go. [22:33] >> Clarifying. I didn't even tell it to [22:34] clarify. How should the gallery move? [22:37] Continuous infinite horizontal scroll. [22:40] Let's do that. That sounds cool. [22:42] >> That sounds interesting. Oops. [22:44] Okay, fine. No, I ain't that. Okay. [22:46] Continue. [22:50] All right. [22:52] Go ahead. [22:59] All right. So, it's building it out. [23:03] And figuring out how to build this. [23:06] We will see how it looks. All right. And [23:09] that's I guess really good for jewelry [23:10] site also where it's very visual. So, [23:13] you want to [23:15] This is specific functionality that's [23:17] going to be showing some type of an [23:18] effect. I think so. It's um [23:21] It's like I think it's a Well, we'll see [23:23] how it'll turn out, but it should be [23:24] like a [23:25] images. All right. Interested to see if [23:27] it'll actually [23:29] add images. But, if it doesn't, we can [23:31] add from the media library of the site. [23:34] And so, you can also take an existing [23:36] widget and you can [23:37] expand on that. You can [23:38] >> Yeah. Um, modify it, tweak it, add [23:41] different controls. [23:43] Create another version of the widget [23:45] that's meets your needs or whatever. So, [23:48] who do you think [23:50] um [23:52] Angie Dekaton and Angie, who do you [23:53] think is really going to benefit them [23:56] um to just get started and and test it [23:58] and use it now [23:59] um to be part of this [24:01] uh this new way of of building? So, I [24:03] think anyone [24:07] I mean, I think it's a really good tool [24:08] to have in your toolbox. [24:10] And um I think anyone who is building [24:13] sites or has a site, [24:15] you know, there's probably if you [24:17] especially if you have a site, there's [24:18] probably a list of things that you [24:19] wanted to do to it and you just didn't [24:21] because it was too complicated or [24:22] expensive. [clears throat] [24:24] So, now's the time. Anything is, you [24:27] know, [24:28] within reach at this point. [24:30] See. [24:33] Um [24:36] a ton of time. [24:39] No. [24:40] It can [24:40] >> Yeah. Let's see what happens. Loading. [24:42] All right. [24:47] Yeah. [24:49] This [24:50] Oh. [24:52] Moving gallery. Ta-da. All right, let's [24:53] try and add it. [25:02] Try that. [25:05] And we're going [25:08] See. [25:09] Oh. All right. Cool. [25:12] So, now let's just look at the Okay, so [25:13] it's using place placeholder. [25:18] Let's go to our media library. [25:21] And [25:23] and [25:25] No. [25:26] All right, over here. [25:28] And that, etc. And now we have this very [25:31] snazzy [25:35] gallery, which is a really great way to [25:36] display images, products, [25:39] projects. And I can change [25:42] up. And these are things that it thought [25:45] of. Pause on hover. [25:47] Nice. [25:48] Um, styling. [25:50] Image heights. [25:52] Very cool. So, this is directly works [25:55] with with Elementor in setup. But, of [25:57] course Angie Code does works [25:59] on on any WordPress website. And um [26:03] So, these were the examples that we [26:04] prepared. And [26:06] we're going to be doing uh [26:08] in a live streaming showing examples and [26:11] also taking on more examples. Um, so I'm [26:13] just going to bring us back over here. [26:15] We [26:16] are approaching the end of this session. [26:19] And uh so, first of all I just want to [26:21] say thank you, Miriam. [26:22] And thank you for joining our viewers. [26:25] And also um next time we're going to be [26:27] preparing also some more [26:29] advanced [26:31] And also let us know in in the chat as [26:34] well and [26:35] Facebook in the community if you want to [26:37] see any other specific [26:40] examples. [26:41] Uh it's you know, it's very important [26:43] to of course stand out. [26:45] You know, like AI this AI era there's a [26:47] lot of AI generated websites and [26:49] content. Um, and so being able to create [26:53] uh you know, advanced interactions and [26:57] custom widgets [26:58] you know, will give you that extra edge. [27:00] Um, we're very excited to [27:03] uh to start showing more of this [27:06] uh this stuff. Um, so thank you very [27:08] much for for joining. [27:09] And we will be uh doing this again uh [27:12] very soon, 2 weeks from now. And uh so, [27:14] thank you. Thank you. Try it. And Angie [27:17] makes it [27:19] because you just have to install a [27:21] plugin. And I know AI can feel [27:22] overwhelming in some ways. But, give it [27:24] a go and you can create really cool [27:25] stuff for your site. Stand out. And um [27:29] yeah, it's fun. So, [27:30] I'm glad that we could share these [27:31] examples with you. [27:34] And uh I hope it was useful. Awesome. [27:36] All right. [27:37] Cheers. Take care.  📄 **Full text:** ![[Full Document Contents/Articles/Getting Started With Angie Build Custom Widgets With AI.md|Getting Started With Angie: Build Custom Widgets With AI by YouTube]] ## Highlights - are ready to go with uh with AI in WordPress. And what does that mean? It means that you can do things with Angie that maybe in the past would have been complicated for you to use or you may have hesitated to do or hesitated to do or it would have been expensive. Like developing customized widgets for specific needs that you have or your customer has or anything like that. Um Angie can build it for you very quickly and uh all you have to know how to do is type and chat with it. All right, so sounds very cool and then ([View Highlight](https://read.readwise.io/read/01krgrp0pdac2j43bs24jwg6tj)) - Tags: 👻 ai highlighted - And we're going to develop some custom code for the site. So, first I just want to go into um >> [clears throat] >> I want to just show you what Angie looks like when you're in the site. So, just so you can get an idea of the experience and environment. So, Angie can be toggled open and and from here, sometimes you want it to be open with you while you're working so that it can accompany you on your work. And sometimes you want to collapse it so ([View Highlight](https://read.readwise.io/read/01krgrp0pqa4a9g9mtsm3gz095)) - Tags: 👻 ai highlighted - um I'm going to just share this screen or to show you guys something. We have uh a GitHub repo and we get a lot of uh requests for functionality from users. And which is great. We love the engagement and we love that people want Elementor to do more. Um Now with Angie, we can take some of these examples and just build it out um for the site and So, this is this is a breadcrumbs widget uh request on uh GitHub and um you're going to show us ([View Highlight](https://read.readwise.io/read/01krgrp0q42c643a6f0cvbez38)) - Tags: 👻 ai highlighted - Um So, you can see what it's doing in the background. It's got a set of uh tasks. Um you can see it there. What does it say? Create a new Elementor widget snippet. Yeah. And then generate and save the breadcrumb code. >> So, Angie understands your setup, understands that um this is a an app a website built with Elementor. And what it's going to do now is going to create uh a breadcrumb widget based off uh uh, the Elementor code base. Exactly. So, it's based off of the magical base. I ([View Highlight](https://read.readwise.io/read/01krgrp0qwq6wfkv46yyc0ynp9)) - Tags: 👻 ai highlighted - here's my breadcrumb widget. All right. And you can see that it's in sandbox only because I didn't choose to publish it. Yeah. Um and if I'm ready to publish it, I can actually just do it from here, which is very cool. So, you got an overview of all of your uh your Angie snippets. They could be either elemental widgets or they could be other WordPress functionality. And you can get a bird's-eye view basically of its status and um switch them on and off and stuff. >> Exactly. Something interesting for people who ([View Highlight](https://read.readwise.io/read/01krgrp0sqbybfd1wfqefr9wma)) - Tags: 👻 ai highlighted - Um, we're very excited to uh to start showing more of this uh this stuff. Um, so thank you very much for for joining. And we will be uh doing this again uh very soon, 2 weeks from now. And uh so, thank you. Thank you. Try it. And Angie makes it because you just have to install a plugin. And I know AI can feel overwhelming in some ways. But, give it a go and you can create really cool stuff for your site. Stand out. And um yeah, it's fun. So, ([View Highlight](https://read.readwise.io/read/01krgrp0w5558d39676d55jbk5)) - Tags: 👻 ai highlighted