# WISIWYG custom components

**URL:** <https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066>\
**Category:** Elements API\
**Created:** [October 27, 2024, 6:14am UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066 "2024-10-27T06:14:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [October 27, 2024, 6:14am UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/1 "2024-10-27T06:14:47Z")

</div>

I created a custom component to automatically import data from Google Sheets. However, I still have to preview it in Safari each time. Is there a way to view the preview directly in Elements? The WYSIWYG aspect of Elements is one of its major advantages compared to RapidWeaver Classic.

 ![Scherm­afbeelding 2024-10-27 om 07.07.21](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/b/fb49a7a29668d98ad4b746036919c08cc28ff414.png)

---

<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:** [October 27, 2024, 11:24am UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/2 "2024-10-27T11:24:41Z")

</div>

Right now we don’t render PHP or third-party Javascript in the Editor - the main reason for this is to stop third-party scripts hijacking the editor.

You could use the If(edit) statement to display some dummy data in a table so you can style it. Here’s [a link to the conditional statement info in the Docs](https://docs.realmacsoftware.com/elements-docs/elements-language/templates/conditional-statements).

I setup a google maps Custom Component like this (code and video below):

```auto
@if(edit)
    <div class="flex items-center bg-surface-100 p-9 flex-col h-full w-[100%] justify-center text-6xl font-bold font-heading text-brand-400">
        Google Map
        <span class="text-lg font-body text-brand-400">Visible when Published or Previewed in Browser</span>
    </div>
@else
    <div class="google-map w-[100%]">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4093.464862367531!2d-122.01383754541656!3d37.33464796568222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb596e9e188fd%3A0x3b0d8391510688f0!2sApple%20Park!5e1!3m2!1sen!2suk!4v1728569724729!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
@endif

```

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [October 27, 2024, 12:50pm UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/3 "2024-10-27T12:50:20Z")

</div>

Thanks !! This works and makes the styling job much easier 😀

 ![Scherm­afbeelding 2024-10-27 om 13.49.33](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/7/a7de69feb199265468ddfcb567a029cf2edf7ef7.png)

---

<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:** [October 27, 2024, 3:23pm UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/4 "2024-10-27T15:23:58Z")

</div>

Oh that is perfect 😍

---

<div class="post-metadata">

**Author:** ![bjarne.larsen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bjarne.larsen/32/26860_2.png) [@bjarne.larsen](https://forums.realmacsoftware.com/u/bjarne.larsen)\
**Post date:** [October 28, 2024, 10:48am UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/5 "2024-10-28T10:48:05Z")

</div>

Hi Dan.  
That look great, but how can I show my own map, and not just Apple Park?

---

<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:** [October 28, 2024, 10:55am UTC](https://forums.realmacsoftware.com/t/wisiwyg-custom-components/45066/6 "2024-10-28T10:55:30Z")

</div>

You’ll need to replace the iframe line of code (line 8) with the new iframe embed code Google gives you for the map location you want.

```auto
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4093.464862367531!2d-122.01383754541656!3d37.33464796568222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb596e9e188fd%3A0x3b0d8391510688f0!2sApple%20Park!5e1!3m2!1sen!2suk!4v1728569724729!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

```

Here’s a quick video to show you how to do it:

Let me know if you get stuck and need a little more help!