Require a marketing landing page to promote FF Cloud sign-ups

[iskerrett]

Story

No response

Description

We need create a landing page that will summarize the benefits of using FF Cloud, promote a free trial, and allow to sign-up for a FF Cloud account. Similar to: https://www.confluent.io/get-started/ https://app.posthog.com/signup

L

[joepavitt]

The sign up page would actually live in the app itself (note that PostHog's sign up is app.posthog, not www.posthof)

Still a valid request, and something that we should prioritise, but this will live in flowforge repo, so I will move it over

[joepavitt]

Ooh actually, before I move this to FlowForge Repo

There is some merit behind this living in our website as its not something we want to have included in with FlowForge for the Open Source variant? Or does it not really matter?

Feels more natural, and is definitely technically a more natural fit inside the FF repo

Thoughts @knolleary?

[iskerrett]

Ideally we are using a HubSpot form for the initial sign-up so we can track the customer journey through HubSpot. I am not sure if this creates an issue in the repo.

On Wed, Jan 18, 2023 at 2:57 PM Joe Pavitt @.***> wrote:

Ooh actually, before I move this to FlowForge Repo

There is some merit behind this living in our website as its not something we want to have included in with FlowForge for the Open Source variant? Or does it not really matter?

Feels more natural, and is definitely technically a more natural fit inside the FF repo

Thoughts @knolleary https://github.com/knolleary?

— Reply to this email directly, view it on GitHub https://github.com/flowforge/flowforge/issues/1621, or unsubscribe https://github.com/notifications/unsubscribe-auth/AITBW6QRARSBK6W2A2K75RDWTBDK7ANCNFSM6AAAAAAT7OLF6M . You are receiving this because you authored the thread.Message ID: @.***>

[knolleary]

If the goal is to have more FF Cloud-specific content sit alongside the Sign-Up/Login page (ie on app.flowforge.com), then that will have to be delivered in the flowforge repo. But you are also right that we don't want FF Cloud specific content in the core flowforge repo.

In the same way we provided a means to provide custom text to the sign-up page in https://github.com/flowforge/flowforge/pull/1589, we would take a similar approach - provide a means for a host of the FlowForge software to provide custom content that gets displayed on that page.

It would need to be more than the simple text banner we've pushed into 1.3 - but no reasons it couldn't be a blob of HTML that conforms to a template we define and gets inserted in the page.

With that in place, we can then customise the content however we want in our FF Cloud instance.

[joepavitt]

Ideally we are using a HubSpot form for the initial sign-up so we can track the customer journey through HubSpot. I am not sure if this creates an issue in the repo.

What aspects of the customer journey are you wanting to track? I expect we get everything in PostHog already.

I also have the changes in for us to automatically create Contacts in HubSpot when a user signs in now too

[iskerrett]

You and I need to spend some time with PostHog so I can understand what it provides.

We need to be able to trace back from any FF customer to how they found us. This could be from a sales person outreach, organic search, tradeshow participation, referral, etc. HubSpot is setup to do this and why companies use this tool.

On Wed, Jan 18, 2023 at 3:41 PM Joe Pavitt @.***> wrote:

Ideally we are using a HubSpot form for the initial sign-up so we can track the customer journey through HubSpot. I am not sure if this creates an issue in the repo.

What aspects of the customer journey are you wanting to track? I expect we get everything in PostHog already.

— Reply to this email directly, view it on GitHub https://github.com/flowforge/flowforge/issues/1621, or unsubscribe https://github.com/notifications/unsubscribe-auth/AITBW6UZ4NDRY6TEPW5ZWV3WTBIQ3ANCNFSM6AAAAAAT7OLF6M . You are receiving this because you authored the thread.Message ID: @.***>

[joepavitt]

Speaking with Ian, conclusion for requirement here is that we want a more branded/advertising-centric "Create Account" page. As such, this issue can switch over to /flowforge repository.

[iskerrett]

I think the Confluent and Posthog pages are good examples that we should emulate.

https://www.confluent.io/get-started/?product=cloud https://app.posthog.com/signup

Some comments:

• I like how on the click the logos to get back to the home page.
• I would be nice to add the sign up with Google or GitHub to the page.

Text for form:

• I find the text pretty small on the existing form.
• I don't think we need Sign Up at the top of this form.
• We should be asking for company name, maybe make it optional.
• Text at top of the form: The first 30 days are free to try FlowForge Cloud. No credit card is required.

Text on the side: Title: Get Started with FlowForge, for free. Bullet 1: Title: Quick to Start. Text: Quickest way to get started with Node-RED. No installation required!

Bullet 2: Title: Collaborate Text: Share Node-RED instances with team members.

Bullet 2: Title: Manage Text: Manage remote deployment of Node-RED instances to hundreds of remote targets.

[joepavitt]

Taking influence from Confluence as pe the above, first pass at design:

[joepavitt]

Cleaner font sizing & a "Already have an account?" being added to the right-side.

[joepavitt]

Implementing options are:

Option 1:

• Content is driven by flowforge.yml
  • Quicker, but also pain to update as would require restart of prod/staging each time

Option 2:

• We add a section into the admin settings with the option to inject html content onto the page, if sign up is enabled.
  • Slightly longer to implement, but far easier to iterate on with the content.

@knolleary and I vote Option 2. Nick is building it asap.

[knolleary]

Nick has built it asap - https://github.com/flowforge/flowforge/pull/1692

[joepavitt]

could I get my user upgraded to admin on staging please @hardillb so that I can verify this works as expected?

[joepavitt]

our markup for landing page will be:

<h1 class="mb-6 text-4xl">
    Get started with <span class="text-teal-400">FlowForge</span>, for free
</h1>
<p class="mb-12">
    Lorem ipsum dolor sit amet consectetur. Netus ac in viverra ornare enim
    lobortis dignissim amet. Eget faucibus quam tortor amet.
</p>
<div class="mb-12 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/time.png">
    </div>
    <div class="ml-4">
        <h3>Lorem ipsum dolor consectetur.</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur.
            Netus ac in viverra ornare enim lobortis dignissim amet. Eget faucibus quam tortor amet.
        </p>
    </div>
</div>
<div class="mb-12 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/security.png">
    </div>
    <div class="ml-4">
        <h3>Lorem ipsum dolor consectetur.</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur.
            Netus ac in viverra ornare enim lobortis dignissim amet. Eget faucibus quam tortor amet.
        </p>
    </div>
</div>
<div class="mb-12 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/bias_for_action.png">
    </div>
    <div class="ml-4">
        <h3>Lorem ipsum dolor consectetur.</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur.
            Netus ac in viverra ornare enim lobortis dignissim amet. Eget faucibus quam tortor amet.
        </p>
    </div>
</div>

subject to finalisation/agreement on text once it's rendered and available to view

[hardillb]

@joepavitt there are admin user creds in 1password

[joepavitt]

Thanks Ben, verified working in Staging, although some Tailwind CSS classes don't get rendered properly, as the injected HTML wouldn't naturally be included in the tailwind build process, so classes that aren't used anywhere else in FF are not actioned.

[joepavitt]

@iskerrett this is now with the text you've provided, scope to include replace the Lorum Ipsum paragraph if anything relevant for that space you can think of.

I think the three detail statements feel a little mis-matched and underwhelming, particularly the headlines for 2 and 3, and the description for 2. Any scope for being more descriptive/sales-y?

I need to update the icons too, but can do that tomorrow.

[iskerrett]

Some suggested changes:

• For the text under the FlowForge logo on the right-hand side, I would suggest the following: "Experience FlowForge with one project free for 30 days. Sign-up now with no credit card required."
• For the left-hand side text
• Change the headline to 'Get Started Faster with Node-RED and FlowForge'
• Add sub-headline: '30-day free trial with no credit card required -- Change text under Quick to start to be: The quickest way to get started with Node-RED. No downloads and installation are required. Just sign-up and start building with Node-RED. -- Change text under Collaborate to be: "Seamlessly collaborate with team members. WIth FlowForge, automatically share Node-RED instances with team members. No more manual export / import required.' -- Change Manage to Managed Deployments. Change the text to "Rolling out Node-RED to multiple devices or servers? FlowForge automates this process to ensure reliable and repeatable deployments.'

[joepavitt]

@iskerrett updated content:

[joepavitt]

I did change "Deployment" to "Instance", only because we've made that terminology change in-product this release, so don't want to confuse it.

I have hesitations on our leading line being about speed to Node-RED, suits the people that want to try Node-RED out, and works great for the trial period, but are they the same people that we would expect to lead to meaningful ARR?

[joepavitt]

(I will also update the images before going into production)

[joepavitt]

<h1 class="text-4xl">
    Get Started Faster with Node-RED and FlowForge
</h1>
<p class="mb-6">
    30-day free trial with no credit card required
</p>
<div class="mb-6 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/time.png">
    </div>
    <div class="ml-4">
        <h3>Quick to start.</h3>
        <p>
            The quickest way to get started with Node-RED. No downloads and installation are required. Just sign-up and start building with Node-RED.
        </p>
    </div>
</div>
<div class="mb-6 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/community.png">
    </div>
    <div class="ml-4">
        <h3> Collaborate</h3>
        <p>
            Seamlessly collaborate with team members. With FlowForge, share Node-RED instances with team members, with easy-to-manage access control. No more manual exporting / importing required.
        </p>
    </div>
</div>
<div class="mb-6 flex">
    <div style="flex-shrink: 0">
        <img class="w-24" src="https://flowforge.com/images/pictograms/edge.png">
    </div>
    <div class="ml-4">
        <h3>Managed Instances</h3>
        <p>
             Rolling out Node-RED to multiple devices or servers? FlowForge removes friction from this process to ensure reliable and repeatable deployments, remotely and to the Cloud.
        </p>
    </div>
</div>

[joepavitt]

this is now live: https://app.flowforge.com/account/create