# WYSIWIG Editor Custom Components

**URL:** <https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855>\
**Category:** Elements\
**Created:** [September 8, 2025, 6:51pm UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855 "2025-09-08T18:51:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajenks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ajenks/32/34693_2.png) [@ajenks](https://forums.realmacsoftware.com/u/ajenks)\
**Post date:** [September 8, 2025, 6:51pm UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/1 "2025-09-08T18:51:20Z")

</div>

I often embed Google Reviews via Elfsight and Google Maps via iframes. When I paste these snippets into a custom component, the component disappears from the WYSIWYG editor and the only way to select it moving forward is in the Page Layout. Is there a way to prevent the component from vanishing in the editor, or am I missing a recommended workflow? As it stands, this behavior is not very user-friendly.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 8, 2025, 7:16pm UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/2 "2025-09-08T19:16:49Z")

</div>

Can you post some sample embed code for both? I can then show you how to set each one up so they are more user friendly 😊

---

<div class="post-metadata">

**Author:** ![ajenks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ajenks/32/34693_2.png) [@ajenks](https://forums.realmacsoftware.com/u/ajenks)\
**Post date:** [September 8, 2025, 8:34pm UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/4 "2025-09-08T20:34:28Z")

</div>

I don’t know how to give you the actual code. Once I paste it in here it shows the map, but here is a sample.

`<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d440730.03319420485!2d-82.0127618262268!3d30.345169218268495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e5b716f1ceafeb%3A0xc4cd7d3896fcc7e2!2sJacksonville%2C%20FL!5e0!3m2!1sen!2sus!4v1757363614318!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>`

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 8, 2025, 9:01pm UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/5 "2025-09-08T21:01:24Z")

</div>

Try this code, it will give you a box in the editor so you can see where the map will appear.  
I’ve included a comment on where you Map code is:

```auto
@if (edit)
    <div class="flex items-center bg-surface-100 p-5 pt-20 pb-20 flex-col h-full w-[100%] justify-center text-5xl font-bold font-heading text-brand-400">
        Google Map
        <span class="text-lg font-normal font-body text-brand-400">Visible when Published or Previewed in Browser</span>
    </div>
@else
    <div class="google-map w-[100%] ">
    <!--Google Map Code START -->
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d440730.03319420485!2d-82.0127618262268!3d30.345169218268495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e5b716f1ceafeb%3A0xc4cd7d3896fcc7e2!2sJacksonville%2C%20FL!5e0!3m2!1sen!2sus!4v1757363614318!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    <!--Google Map Code END -->
    </div>
@endif

```

Here’s how it works…

---

<div class="post-metadata">

**Author:** ![ajenks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ajenks/32/34693_2.png) [@ajenks](https://forums.realmacsoftware.com/u/ajenks)\
**Post date:** [September 9, 2025, 1:51am UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/6 "2025-09-09T01:51:32Z")

</div>

This is a great idea. I need to start thinking out of the box like this. Thanks @dan

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 9, 2025, 9:01am UTC](https://forums.realmacsoftware.com/t/wysiwig-editor-custom-components/50855/7 "2025-09-09T09:01:55Z")

</div>

You’re welcome, and you could take this a step-further and make it reusable by adding some UI Properties to configure the map or included code. Lots of fun stuff is possible 🙂