Injecting code into Webflow (Creating a Node.js Web App from Webflow)

Hello @Everyone,

This is a technical question, for people who know Javascript, especially Node.js.

My Dev and myself are working on a WebApp, that’s powered behind the wheel with the MEAN Stack (with Node.JS, same engine powering Webflow itself).

What my Dev asked me recently, is that I put myself empty <section id="xxx"></section> where, for example, a text should be replaced by the back-end program.

He uses <section> markup because it’s very rare when front-end coders use it, and thus it’s easy for him to find where he injected code with it.

For instance, let’s say on Webflow, I add a <div class="xxx">Text</div>, and I want the dev to take control of this Text.

You’d tell me “why doesn’t he uses Div IDs ?”, well because he told me that IDs cause alot of redundancy / issue / loopholes.

So he needs me to insert a <section id="xxx"></section> INSIDE the <div class="xxx"></div>.

Which is not possible on Webflow.

Now the issue is, everytime I want to insert my dev’s <section> into my <div>, I have to first remove the section (but make sure I don’t cleanup this class in the Style Manager), then insert a Custom Code widget, inside what I’d write inside the <div><section></section</div> as needed.

But in final, the code looks like crap: <div class="w-embed xxx"><div><section>text</section></div>.

I really need to inject these markups inside Webflow, otherwise everytime I update a page, the Dev has to put them again by hand one by one.

Anyone has a better solution / has had this issue when building something more than a simple CMS (as we’re building a Web App here) ?

3 Likes

Hi Sorry for the delay on this.

A structure of <div> <section></section> </div> is fully achievable.

All you need to do is nest a div inside another div. Select the nested div and use the settings panel to change it to a section element.

2 Likes

Hello Alex,

Oh thank you for this great gif video!

Yet, in a web app, you need to be able to nest the <section></section> inside these elements as well:

  • Text Block
  • Links
  • Headings
  • Paragraphs

Which is not possible in Webflow… Isn’t it?

Hey Isaac,

Instead of using section HTML tag why don’t you use custom attributes like

<div inject="something-here"></div>

? That would be much simpler to do and won’t cause any issues.

You can’t insert a section/div inside of p, a or h1...6, so my solution above would be much easier to use :)

2 Likes

Bartosz!

Okay I’ve slacked this idea to the noder. I’ll tell you if it works out!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.