WYSIWIG Editor Custom Components

Elements
1

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.

2

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 :blush:

4

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>

5

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:

@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…

3 Likes
6

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

7

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 :slight_smile: