Guest Gate Theme Component

[Don]

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

Guest Gate v1.0

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

Guest Gate v2.0

Hello

Guest Gate v2.0 is a modern, configurable gate for anonymous visitors on Discourse.

It can display a modal to encourage visitors to Sign Up or Log In, either as a soft conversion prompt or as a gate that visitors cannot dismiss.

Guest Gate started from the original Guest Gate Sign Up Popup plugin and has evolved considerably since then.

Triggering the Guest Gate

Version 2.0 supports several ways to trigger the gate:

1. Page views
   Display the gate after a configurable number of eligible page views.

2. Time
   Display the gate after a visitor has spent a configurable amount of time on an eligible page.

3. Scroll
   Display the gate after a visitor has scrolled through a configurable percentage of the page.

4. Lightbox
   Display the gate when an anonymous visitor opens an image in the Discourse lightbox.

5. Any
   Enable multiple trigger types and display the gate when the first configured trigger is reached.

You can also configure a delay between the trigger and the modal appearing.

---

Repeat behaviour

After the Guest Gate has been displayed, you can control when it may appear again.

Available modes:

• Repeat trigger: show the gate whenever the configured trigger fires.

• Random page views: show the gate after a random number of page views.

• Once per session: show the gate at most once during the browser session.

The legacy Show only once setting is also supported for backwards compatibility.

---

URL visibility

Two settings control where Guest Gate is allowed to appear:

url_for_show

Define the paths where Guest Gate can be triggered.

Examples:

• * all pages

• / homepage

• /latest Latest

• /t/* topics

• /c/* categories

url_for_hide

Define paths where Guest Gate must never appear.

Hide patterns always take precedence over the show list.

---

Modal settings

dismissable

Allow visitors to close the Guest Gate modal.

Disable this option to create a non-dismissable gate.

gate_modal_size

Choose the modal width:

• compact

• standard

• wide

gate_body_alignment

Choose the horizontal alignment of the main modal content:

• left

• center

• right

gate_footer_position

Choose the alignment of the Login / Sign Up links or buttons:

• left

• center

• right

gate_title_visibility

Show or hide the modal title.

gate_title_position

Control the title margin positioning.

---

Login and Sign Up

Guest Gate supports the normal Discourse authentication flow as well as custom URLs.

use_gate_buttons

Use buttons in the modal footer instead of text links.

custom_url_enabled

Use custom Login and Sign Up URLs instead of Discourse’s native authentication actions.

custom_login_url

Destination used for Login when custom URLs are enabled.

custom_signup_url

Destination used for Sign Up when custom URLs are enabled.

You can also configure the button styles and Font Awesome icons independently.

---

Discourse Connect

Guest Gate supports Discourse Connect.

When Discourse Connect is enabled, you can optionally provide a separate Sign Up URL using:

• enable_discourse_connect_signup

• discourse_connect_signup_url

---

Custom Gate

The Custom Gate allows you to completely customize the content and appearance of the modal.

Enable it with:

custom_gate_enabled

Enable the custom gate design.

custom_gate_image

Optional image displayed above the custom text.

custom_gate_image_alt

Alternative text for the custom image.

custom_gate_image_width

Set the image width using values such as:

• 150px

• 50%

• 100%

custom_gate_image_position

Align the image:

• left

• center

• right

custom_gate_big_text_position

Align the custom heading:

• left

• center

• right

custom_gate_little_text_position

Align the custom text:

• left

• center

• right

The custom gate also provides settings for the heading, text, background, footer and link colours.

---

Analytics

Guest Gate v2.0 includes optional privacy-conscious analytics.

Enable it with:

enable_analytics

When enabled, Guest Gate tracks:

• Gate impressions

• Trigger reason

• Page path

• Login clicks

• Sign Up clicks

• SSO actions

• Dismiss actions

Events are exposed through window.dataLayer and are also dispatched as the browser event:

discourse-guest-gate:analytics

This allows Guest Gate to be integrated with analytics and tag-management platforms such as Google Analytics, Google Tag Manager, Matomo, or custom analytics implementations.

No personal data is collected by Guest Gate.

Analytics are disabled by default.

analytics_debug_logging

Enable this while configuring analytics to print Guest Gate events to the browser console.

It is recommended to disable this in production.

---

Migration from v1

Guest Gate v2.0 includes a settings migration for existing installations.

The following legacy settings are automatically migrated:

• max_guest_topic_views

• dismissable_false

• gate_show_when_thumbnail_clicked

Existing configurations therefore do not need to be recreated manually after upgrading.

---

Requirements

Guest Gate v2.0 requires Discourse 3.2.0 or newer.

---

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

[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

https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/4

[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)

https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/6

[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?