How to display <script> in HTML block

Ask us anything How do I?
1

Hi there! Could you help me, fellows.

I can’t display a simple form in an html block in a modal window.

The script doesn’t run inside the published project

Снимок экрана 2023-02-02 в 20.33.00
Снимок экрана 2023-02-02 в 20.33.001920×1195 88.3 KB

and remains as text. I use a simple html block and statically insert a script into it

1 Like
2

Anyone knows how to use external JS in Weweb? All my experience with working with external scripts in Weweb isn’t successful. JS works unpredictable, especially those that use the DOM. I can’t find any instructions and explanations from Weweb team in official documentation. I’ve got only recommendations to develop my own plugins. But this is beyond my knowledge as a nocoder. External plugins are executed as simply as possible, but not in Weweb.

Is there any idea about this?

3

External libraries, loaded as custom code, will not be available in the editor. They will be available in the published version though.

4

The simple scripts I’m trying to host don’t work in published applications. Scripts, both with and without variables.

5

That is really weird. All other platforms have the capacity to test HTML embedding prior to publishing. This breaks good development cycles such as QA and checking the design across device size types.

1 Like
6

that’s an inaccurate statement.

1

2

1 Like
7

@jaredgibb sorry, I don’t follow.

My statement is checking to see if we can see (it’s weird not being able to see) HTML embed(external form html) in testing. Is this what you are referring to?

8

Importing custom javascript tends to be tough on WeWeb. I hope they work on this asap :slight_smile:

1 Like
9

@JMac, all this is work, but importing custom JS can be easier with the free weweb-embed tool from Statechange. It’s unlocked others and certainly me multiple times!

Lots of innovation around, some of which is first-party, and some of which is user-land. As Ted Lasso reminds us, be curious, not judgemental!

7 Likes
10

@raydeck & @jaredgibb thanks for the links, I can now see what you were saying.

My statement wasn’t meant to be judgemental, simply trying to find clarity after numerous tries. If I offended anyone, I do apologize. I do tend to speak quite straight and some take that as being negative or attacking, which is not really the case. It’s trying to find information fast and learn quickly.

Having bounced from bubble, softr, and flutterflow, it has been frustrating to find a platform that is fit for purpose with my use case. I think that WeWeb will meet that though, which is exciting.

3 Likes
11

No offense taken, I think. It’s easy though, to assume things aren’t possible while they may be thru some JS or CSS trickery.

2 Likes
12

Thanks for sharing this—very cool!

13

Here’s how I addressed this from a solution that another poster provided from a different thread.

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js';
script.setAttribute('api-key', 'your-api-key-here');
script.setAttribute('another-attribute', '123abc');
script.onload = () => this.onScriptLoaded();
document.body.appendChild(script);

Setup Steps

  1. Go to Page > Settings > Trigger page workflows
  2. Create a new On page load workflow.
  3. Add a Custom JavaScript action.
  4. Insert the above code and modify the script.src and script.setAttribute (optional).
  5. Reload the WeWeb editor by pressing the browser’s refresh page button or CTRL+R.
1 Like