Guest Gate Theme Component

[Don]

Hello 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 footer text color
   Change the footer text color. This applies if the use gate buttons setting is disabled and you have set up a custom gate.
8. 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 Huge thanks to the plugin authors, maintainers and contributors: @vinothkannans, @jgujgu and @michaeld

	Repository	GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

[markersocial]

Thank you! This is great

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.

[Don]

Hello @markersocial,

Thanks for the suggestion!

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

btn-primary or btn-default

Feature: ability to change login and signup button style

[markersocial]

Fantastic, thanks so much @Don! Updated it now and it’s working awesome

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.

[davidkingham]

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!

[Don]

Hello David,

Thanks, this is a great suggestion!

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)

Feature: abality to change guest gate buttons url

[davidkingham]

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

[Don]

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

[davidkingham]

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?

[Don]

Yes, this is what I see now.

I’ll try to check other browsers and devices.

[davidkingham]

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!

[Don]

Hi David,

I think that’s not normal. 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?

---

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

and go back to English (United Kingdom)

[davidkingham]

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.

[Jonathan5]

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.

[Don]

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

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

[Jonathan5]

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

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.

[Don]

@Jonathan5

and there’s nothing wrong with your JavaScript

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

---

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

[Himanshu_Singh]

Hey all,
I recently installed this component and it works like a charm but I am not sure if the gating mechanism slows down the google bot from crawling the topics.

Does anyone know about the impact on crawlers?

[Himanshu_Singh]

I am having some configuration issues with Guest Gate when I am using SSO with Discourse Connect.

The user is able to login in the main site and then appears to be logged in Discourse but after clicking a few topics the guest gate modal shows up. This is unusual as the user is logged in.

I have custom URLs for login so when user clicks on I am already logged in they are taken based custom login page and the cycle repeats itself.

Only way around this is when user clicks on the native login button in Discourse and is automatically logged in.

It appears that for some reason Guest Gate is not honoring the login from SSO and requires native login to activate.

Have other people faced this issues? Any suggestion on a solution or a workaround?