How to make a <script> with dynamic "src" parameter?

Wappler General How To
#1

Hi everyone!

I have a live chat script on a website, similar to Intercom.
Currenly it is simple tag, like <script src="//code-ya.jivosite.com/widget/abcde1234" async></script>

Now I want to use different scripts in different situations (for example, depending on the user’s selected language).
So it has to be dynamic data binding, like <script dmx-bind:src="serverconnect.data.jivolink" async></script>

But I quickly recognized that dmx-bind:src doesn’t work here. I read some forum threads, including this, so I’ve got a better understanding, why exactly dmx-bind:src doesn’t work.
If I understand, there is some solution to this, but I can’t find a clear instruction.

Seems like I have to prepare a script and run it via “Run JavaScript” step in “Page flow” or via Static Event after page or data loaded.
But specific steps are a bit unclear for me. Because of the lack of JavaScript knowledge and how it works in Wappler.

Can someone please give me a detailed instructions, how to solve this?

How can I add text from a DB query into a script?
#2

This is a simpler example I could find on how to build your JS function which would inject the script tag.
There are other sample codes on the page, which you can try as well.

Once you have created this function on page or in your custom JS file, call that function in page flow.
Hope this helps.

1 Like
Dmx.parse not working on var function and not run the console.log
#3

Thank you very much, @sid! Seems like indeed there are plenty of options. I will investigate and try, then.

#4

If the dynamic data is coming from the database and therefore from Server Connect you can always use EJS templating to SSR the script src attribute.

3 Likes
#5

That’s an interesting idea, I’m not even thought about it. I’ll try it, maybe it gonna work. Thank you!

#6

It totally worked!
Thank you very much again for great advice! :beers:

1 Like