Streaming live at 10am (PST)

Suggestion for using webflow for a site with a stateful header

Hi there,

New to this place, but I’m hoping to hang around here for some time!

We have decided that we want to try using Webflow for our company, after having it recommended a few times.

Our current platform is made in React and NextJS and is: http://hoodheroes.co/ , and our platform is our product. Thus, it has quite a bit of custom functionality/code.

We are short on developers (as developers are expensive), thus we want to offload the making of some of the sites on our platform from our developers to the designers to speed things up (the landing page and our “for companies” pages).

Everything seems good so far, but we are having a hard time figuring out, how we can have a custom stateful header on our webflow pages (e.g. a header that shows whether a user is logged in our not).

So far we have tried the following with no avail:

  1. Embed webflow in an iframe: We had our landing page on our platform show its stateful header and footer, and everything inbetween was an iframe showing our landing page designed in Webflow… This was impossible, as Webflow pages will not show in an iframe.
  2. Hosting our platform on an app subdomain: This seems like a way companies often go. Then we would host Webflow on our main-site and our app on our .app subdomain… However, we wont have our stateful header this way (or perhaps we can with some difficulty, but we need to implement it as a custom component in webflow?).

We are now considering trying:

  1. Embedding our stateful platform header and footer on our webflow hosted page through an iframe. Perhaps we can keep statefulness this way by showing the header from our platform on the webflow pages, but… At this point, we wanted to ask some more experienced people here, if this is a sane way to go.
  2. Export all our webflow designs to HTML + CSS and import them in our platform… We will lose the flexible page-update- and CMS-abilities of those pages though, which I know will sadden our designers.

In general, it seems difficult to merge webflow with existing sites and use it for just some pages, but maybe we are missing something here.

Hope someone out there more experienced can help enlighten us :slight_smile: Thanks in advance and maybe you have a great day!

  1. This is the way I would do it. Once the design is baked, I would then limit new design deployments to scheduled iterations. I personally have never needed to go back to a Webflow design once implemented as I usually convert the Webflow code to production code and dump the Webflow CSS and JS for performance reasons. I find the time I save prototyping in WF is worth the effort. A little faster than an XD or Sketch to code cycle. I also recommend not using Webflow’s IX2 animations, since I find them to be a large source of the effort on converting changes. Instead I opt to layer Animations on the top of a converted site using Greensock which is much easier to maintain, more capable, and faster.

While developers are not cheap, neither are buildings and offices.

That was a fast response, thank you!! Let me return the favor with a fast response! (And if someone has any other/more input as well, please keep chime in :slight_smile: )

Great to hear some feedback from someone else that has actually done one the suggestions we considered (and are leaning towards). I had not considered the performance aspect in it all, but I get that point as well.

My experience is also mixed with Sketch (as it only has Mac support) and XD which has had some other issues for us. Webflow seems superior as a web-based tool for our needs + we actually get full “copy-pasteable” pages in HTML and CSS. And then there’s the designers’ experience.

Insightful with the animations, I will have to look more into Greensock before I have an opinion on that, however, the input is valued!

Thanks for giving is some external feedback, as we are kind of in a limbo about what direction to take here long-term, while being able to produce results fast.

…And yeah, neither are those. And same goes with time, which we have already wasted quite a bit on by trying to manually implement the landing and for companies pages in HTML+CSS (React), but hey - you live and learn.