Streaming live at 10am (PST)

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


#1

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) ?


#2

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.


#3

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?


#4

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


#5

Bartosz!

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


#6

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