WISIWYG custom components

Elements Component Development
1

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
Scherm­afbeelding 2024-10-27 om 07.07.211432×524 7.77 KB

2

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.

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

@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
3 Likes
3

Thanks !! This works and makes the styling job much easier :grinning:

Scherm­afbeelding 2024-10-27 om 13.49.33
Scherm­afbeelding 2024-10-27 om 13.49.331978×948 28.5 KB

1 Like
4

Oh that is perfect :heart_eyes:

5

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

6

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.

<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!

1 Like