CSS Creeping Into Embed, How to Avoid?

Questions
1

I have an embed but it’s not looking how it is supposed to.

I gather that the p tag global css is creeping into the embed.

How do I prevent this from happening?

2

Hey, how do I get a reply?

3

Hey,

Sorry for late answer, we haven’t been so active during the holidays. Can you send me a website URL so I can figure out what is happening? Thanks

4

I don’t have it anymore. I had to find some workaround. Anyway, you think it’s very specific?

It looks like CSS always creeps into embed code, not sure that it would only be me.

5 
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-[#0f172a] p-6 min-h-screen flex flex-col items-center justify-center text-white">
  <div class="flex flex-col space-y-4">
    <div class="flex items-center">
      <img
        alt="logo"
        class="h-15 w-15 text-red-600 rounded-full"
        height="60"
        src="/placeholder.svg"
        style="aspect-ratio:60/60;object-fit:cover"
        width="60"
      />
      <div class="bg-[#a31621] rounded-lg p-3 ml-3">
        <p>Hello</p>
      </div>
    </div>
    <div class="flex items-center justify-end">
      <div class="bg-[#a31621] rounded-lg p-3 mr-3">
        <p>Oh, hi there.</p>
      </div>
      <img
        alt="user"
        class="h-15 w-15 text-blue-500 rounded-full"
        height="60"
        src="/placeholder.svg"
        style="aspect-ratio:60/60;object-fit:cover"
        width="60"
      />
    </div>
</div>```

Here's the code I embedded.
6

Hey, do not load 3rd party scripts inside of an embed, better load them in global settings in custom code section, for example in HEAD END.

In this case that would be

<script src="https://cdn.tailwindcss.com"></script>

Ther est of the code after that you should load in embed.

7

  1. How does this fix the issue?

  2. I don’t want it to be loaded on other pages. I still have to load it for all other pages?

8

Hey, do not load 3rd party scripts inside of an embed, better load them in global settings in custom code section, for example in HEAD END. <… How does this fix the issue?

9

It fixed the issues because we do not allow 3rd party scripts in embeds. We need to do better UX for that, since you can’t know that if I didnt I tell you like I did now :smiley: But we will make that clear inside of the builder soon.

For now try to make it work with embeding code in head end, and I will create soon tutorial on how to load script only on specific pages. :slight_smile:
Since Divhunt websites are SPA, it’s not straightforward like in other builders.

10

I’m very confused. Since when is it that you don’t allow one to embed third party scripts in embeds?

How else am I supposed to embed something from a third party?

Simply not allowed?

Clarification is needed here.

11

I would highly appreciate, and I believe other users would as well, the ability to execute embedded code in the header or footer of a specific page, not just globally. I think this would simplify a lot for us as users, allowing us to embed third-party scripts on a page without having to write a separate plugin — something that, as a designer and not a developer, I cannot and do not want to do

12

Hey,

We will work on that soon. It’s not that easy as it looks, since we are single-page applicaiton. When you load some 3rd party script, it will stay loaded while browsing through website, since visit to next page doesn’t have a refresh. That’s why we need more time for that.

And we do allow 3rd party scripts, just through custom code section of your website, you can load them in header or footer, not in your embeds. In embed you can write custom js, css & html, but not load 3rd party scripts from href.

As well you can load 3rd party scripts dynamically on specific page through our files system, I will create tutorial for that

2 Likes
13

Pakic, I’m very confused. I’ve been embedding stuff since day one without any issue.

Now you say it’s not possible… my brain is not computing this.

14

Something like this would be great:

Bildschirmfoto 2024-01-14 um 18.52.31
Bildschirmfoto 2024-01-14 um 18.52.311822×2506 194 KB

15

Can we have a reply?

16

@David

You can load any script in embeds, only thing is that those scripts won’t load inside builder, rather than on live site only.

1 Like
17

Thank you. But I got confused with this.

My problem was that there’s css creeping into the Embeds, I am not worried about it displaying in the builder.

How do I prevent css and other stuff from interfering with code from inside the Embeds?

This thread got derailed, I just need to know how to do this.

Just tried another code and got all mangled up.

Please let me know.

18

Can you give me website url or try to record me what exactly do you mean? :slight_smile:

19

CSSCreep | Home (divhunt.art)

Here you go.

But this happens on all websites no?

20

@David I haven’t tested this, but I think you could put it in the Custom Code area, inside the headend without having it display on every page by doing something like this:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var urlToCheck = 'https://www.yourdomain.com/somepage'; // URL where you want the script to load
    var currentUrl = window.location.href; // Gets the current URL

    if(currentUrl === urlToCheck) {
      var script = document.createElement('script');
      script.src = "path/to/your/script.js"; // Path to the script you want to load
      document.head.appendChild(script);
    }
  });
</script>

This way you could load the script via javascript and use a conditional to specify which pages you want it to load on. Again I didn’t test this.