Speak to 2 audiences from a single landing page

Ask the community
1

Goal:
So I need to build a landingspage that speaks to two target audiences, but not at the same time.

Initial Idea:
My idea was two big buttons above the fold with:

Button 1 → I'm a {audience A}
Button 2 → I'm a {audience B}

Below those buttons are blocks that are hidden by default, but get shown again depending on which value is set by the aforementioned buttons.

Ask
A) Can this be done?
B) Does anyone tackled this goal already and come up with alternative UX/UI solutions?

2

I’m not sure Softr is the best solution for this type of use case, unfortunately.

3

Sure, I understand that. Then again, since Softr support custom coding anything is possible. I mean, just look at the things @matthieu_chateau build.
So when some custom thing is needed which is not to far out there, I think/hope Softr can be used if really needed to.

4

Would it work to follow on from the user-selected button press by going to a sign-up page, to create a user and then allocate the user to a group determined by the button previously selected? Then the user is taken to a page, or back to the first page where blocks are hidden/displayed by conditional filters by user groups.

Hard to know if this suits your use-case. It depends on whether the audience is ‘permanent’ and suits being allocated to a user group or not.

Let us know your experience/thoughts on this.

5

Hi,

If this is for non-logged-in users (which I believe is the case):

  • The no-code approach would be to use your homepage as the “Are you A or B” page. The button for A would redirect to landing page A, and the button for B would redirect to landing page B.
  • The code-based approach would involve showing or hiding elements based on a variable. Since the users aren’t logged in, the only available variable I can think of is a URL parameter. This way, you wouldn’t need two separate buttons.
  • A third approach — if you don’t have any information about the audience viewing the landing page — would be to hide everything on page load except the two buttons. When one of the buttons is clicked, it would reveal either blocks A, B, C, D or blocks E, F, G, H.
6

Hey guys, wow really appreciate you guys input.

@MarkSchofield the audience is indeed not permanent (it’s a sales (landing) page). So your approach would not be suitable for my use-case. Thanks for chiming in with the idea though!

@matthieu_chateau option 1 could be a workaround indeed. But since I was leaning towards a single page approach, so that would be the third approach. I found this earlier thread that could give me more direction: Hide or show blocks based on a record's attributes - #18 by Julien_Berawen. Instead of a field attribute triggering hiding/unhiding of blocks, for me the trigger would be a click on a button.

I’m not really super familiar with custom code in Softr, but do know that the new block designs might have broken workarounds like in that thread. @matthieu_chateau do you have insights into if the approach from that thread is still feasible? Please don’t waste your own time on this for me :slight_smile: I’m already more than glas if you can shine a light on how much the solution in the linked thread is still feasible with the new blocks and another trigger.

7

What block would you use for the buttons A and B (a CTA block would be better)?

What are the block IDs to show for audience A and what are the block IDs to show for Audience B?

8

Yep CTA block with two buttons seems best indeed (block ID ‘cta1’).
And blockID for audience A (‘grid1’) and audience B (‘grid2’).

9

Thanks,

These three blocks are the only blocks in the page?

10

So far yes, but there will be some more.

11

Can you try:

<style>
#grid1, #grid2 {
    display: none;
}

</style>

<script>
window.addEventListener('block-loaded-cta1', () => {
    document.querySelector('#cta1 a:nth-child(1)').addEventListener('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        document.getElementById('grid1').style.display = 'block';
        document.getElementById('grid2').style.display = 'none';
    });

    document.querySelector('#cta1 a:nth-child(2)').addEventListener('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        document.getElementById('grid1').style.display = 'none';
        document.getElementById('grid2').style.display = 'block';
    });
});
</script>

To be inserted in the custom code - page level - header level.
This is basically the same system as the unofficial tab feature I created before the native tab block was introduced.

Speaking of this, the native Softr tab feature is also a solution if you want 0 code - not exactly the same design base but :man_shrugging:

1 Like
12

I forgot to mention that you can leave the actions for the CTA buttons empty (or add one - scroll to the same #cta1 block)

13

Works like a charm and very snappy too! Thanks :100:
So in theory this could be extended to multiple buttons and grid blocks? (Albeit probably a performance hit.)

14

Yes, the logic of the script is pretty visual at the end.

First you hide all block with css (the fastest way within the browser)
Then you hide/show (.style.display) necessary blocks according to click on button 1, 2 or 3.

Note that adding these two, each time:

event.preventDefault();
event.stopPropagation();

is necessary to prevent any default behaviour set up by Softr (example: clicking on a cta button without any action ususally redirects to the homepage… We don’t want that)

1 Like
15

Thanks for your time and help.
Custom coding a bit here and there can really make Softr apps stand-out.
Thanks for helping Softr users add a bit more magic to their Softr apps, you’re the MVP around here for sure!

1 Like