Guest Gate Theme Component

Hello :wave: This theme component is created from Guest Gate (Sign Up Popup Plugin). It can lock topics for anon visitors with a modal and force them to Sign Up or Login. The component can be use for an alert modal, encouraging visitors to sign up but allowing them to close the modal (for this, leave the dismissable false setting unchecked). Options include changing the number of topics that can be viewed before the modal is displayed.


Tip: If you use the “custom gate” option and want to hide the modal header (as on the image above) you have to delete the guest_gate.title field and hit a space. It will remove the modal title, so that you instead can use a title below the image.

You have two main gate options:

  1. Generic gate (default: it will use the Discourse Signup CTA text in modal). It uses these texts: js.signup_cta.intro and js.signup_cta.value_prop

  2. Custom gate (you can customize the modal: add image, custom text and colors).


And there are lot of other settings

Guest Gate modal global settings

  1. max guest topic views
    Number of topic views until gate displays. After the gate first appears, it appears randomly between 1 and this number.
  2. dismissable false
    Removes the close button, which prevents visitors from closing it.
  3. use gate buttons
    Use buttons on modal footer instead of links.
  4. custom url enabled
    Enable the custom login url and custom signup url options. The normal behaviour (if you leave this option unchecked) is for the Login or Sign Up modal to appear on the current topic page.
  5. custom login url
    For example, /login is the home page with the “Login” modal displayed.
  6. custom signup url
    For example, /signup is the home page with the “Sign Up” modal displayed.
  7. gate footer position
    Footer buttons/links position.
  8. gate show only once
    Guest Gate modal show only once per session.

Custom Gate settings

  1. custom gate enabled
    Enable it if you want to customize the modal.
  2. custom gate image
    Upload an image to display at the top of the modal.
  3. custom gate image width
    The uploaded image width. You can use px, % etc, e.g. 100% will add a full modal width (minus padding) image.
  4. custom gate big text color
    The “big text” appears below the image. You can set the color of the text.
  5. custom gate little text color
    The “little text” appears below the big text. You can set the color of the text.
  6. custom gate background color
    Change the modal background color.
  7. custom gate link color
    Change the footer link color. This applies if the use gate buttons setting is disabled and you have set up a custom gate.

Credit :heart: Huge thanks to the plugin authors, maintainers and contributors: @vinothkannans, @jgujgu and @michaeld

26 Likes

Thank you! This is great :slight_smile:

I really like that the log in / sign up links can be replaced with buttons.

I’d suggest that perhaps the sign up button should be the highlighted (blue) color with the ‘I already have an account’ button being grey. That seems to be more standard, at least from my observations of popular sites. Likely most people seeing the modal don’t have an account, so it probably makes sense.

1 Like

Hello @markersocial,

Thanks for the suggestion! :slightly_smiling_face:

I’ve added these two settings. Now you can change the guest gate modal login and signup buttons style.

btn-primary or btn-default

3 Likes

Fantastic, thanks so much @dodesz! Updated it now and it’s working awesome :slight_smile:

My only other suggestion would be to be able to customise the frequency of recurring prompts.

Setting: max guest topic views
“Number of topic views until gate displays. After the gate first appears, it appears randomly between 1 and this number.”

Having max guest topic views set to 1 or 2 is nice, encouraging sign up early - but if the user declines (and show once per session isn’t enabled), it would be nice to be able to show the modal again at a less frequent rate so it isn’t too aggressive on lurkers. Like every 5 or more topic views for example.

1 Like

Hey Don, great component! Any chance you could make the sign up button be customizable so a url could be inserted? I use Memberful for SSL so the normal sign up link doesn’t work, just throws you to the login page. Thanks!

2 Likes

Hello David,

Thanks, this is a great suggestion! :slightly_smiling_face:

I’ve added this. I replaced the redirect_to_home setting with custom_url_enabled and two options.

  1. custom_login_url: /login
    (by default this is redirect to homepage and open login modal)
  2. custom_signup_url: /singup
    (by default this is redirect to homepage and open signup modal)
1 Like

Fantastic! Only one issue, now the custom gate text options are not working

I checked your site and works for me. Maybe try a hard refresh or reopen the browser I think you see a cached version.

Screenshot 2022-05-11 at 22.53.33

1 Like

That’s what I thought too, cleared my cache, tried 4 different browsers and all were the same, very strange! If you don’t mind trying again, I just changed the guest_gate.title to be ‘Test’, do you see this update?

Yes, this is what I see now.

Screenshot 2022-05-11 at 23.58.07

I’ll try to check other browsers and devices.

Same results over vpn, on my phone, different network. This is the strangest thing ever! I guess as long as everyone else can see the correct text it’s okay! :rofl:

Hi David,

I think that’s not normal. :slightly_smiling_face: Maybe there is a locale bug. My best tip is the set locale from accept language header setting.
As I see you using this on your site and maybe that’s why you see the default texts on modal because your browser language different and Discourse return it to the default text.

Can you turn off this setting and try again?

Screenshot 2022-05-12 at 8.45.19


Now I can replicate this. I changed the Chrome language from English (United Kingdom) to English (United States) and this happened.

Screenshot 2022-05-12 at 13.54.29

and go back to English (United Kingdom)

Screenshot 2022-05-12 at 13.56.02

2 Likes

Thank you Don, you are incredibly helpful! I think there is a bug in my install with languages. Since this doesn’t seem to be caused by your component I’ll start a new topic. I appreciate you looking into this.

EDIT: I figured out that my admin locale had somehow been changed to UK instead of US, very strange! Switched it back and filled out the fields again, now all is well in the world.

2 Likes

3 posts were split to a new topic: Components not respecting text overrides

This works really well. Thank you.

I’ve made some minor edits to make the first post easier to read. There was one sentence I couldn’t understand at all, though:

custom url enabled
Add custom url to Login and Signup buttons / links by default this is redirect the visitor after click the Login or Signup button to the homepage and open Login or Signup modal. Note: If you leave unchecked this than the visitor left on topic page after click the buttons and the Guest Gate modal changes with Login or Signup modal which is dismissable so the visitor can close it and read the topic.

1 Like

Thank you Jonathan :slightly_smiling_face: I really appreciate it :heart: Unfortunately my english is not the best :confused: Sorry for this! I will change these in the Theme Component or of course you could send a PR too. :slightly_smiling_face:

The custom url enabled site setting means.
You can add custom urls to the Guest Gate Login and Signup buttons/links which by default use these custom urls /login and /signup these redirect the visitor to the homepage and open the Login or Signup modal. So if you checked it, it will activate the two settings below this. The custom login url and custom signup url.

If you leave this setting unchecked then it will keep the visitor on topic page after click the Guest Gate Login or Signup buttons/links and open the Login or Signup modal on the same topic page. After this the visitor can close the modal.

I hope it helps to understand and again thank you for your time to makes it more understandable :slightly_smiling_face:

1 Like

Your English is fine, and there’s nothing wrong with your JavaScript, which is the important thing :slight_smile: What about this?

  1. custom url enabled – Enable the custom login url and custom signup url options. The normal behaviour (if you leave this option unchecked) is for the Login or Sign Up modal to appear on the current topic page.
  2. custom login url – For example, /login is the home page with the “Login” modal displayed.
  3. custom signup url – For example, /signup is the home page with the “Sign Up” modal displayed.
1 Like

That mostly thanks to the plugin authors and contributors too. But I do my best to develop this and add more features, fixes etc. :slightly_smiling_face:


Thanks for the correction :slightly_smiling_face: that seems much better. I will correct these in the theme component too.