# Guest Gate Theme Component
**URL:** https://meta.discourse.org/t/guest-gate-theme-component/225107
**Category:** Theme component
**Created:** [April 23, 2022, 8:31pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107 "2022-04-23T20:31:54Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [April 23, 2022, 8:31pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/1 "2022-04-23T20:31:55Z")
| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub](https://github.com/VaperinaDEV/discourse-guest-gate-theme-component) |
| ❤ | **Found it useful?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
> **Guest Gate v1.0**
>
> Hello 👋 This theme component is created from [Guest Gate (Sign Up Popup Plugin)](https://meta.discourse.org/t/guest-gate-sign-up-popup-plugin/56625/). 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](https://meta.discourse.org/t/guest-gate-sign-up-popup-plugin/56625/) 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](https://meta.discourse.org/t/13045?silent=true)
Guest Gate supports [Discourse Connect](https://meta.discourse.org/t/13045?silent=true).
When [Discourse Connect](https://meta.discourse.org/t/13045?silent=true) 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
---
### Author:  [@markersocial](https://meta.discourse.org/u/markersocial)
#### Post date: [May 7, 2022, 5:21pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/2 "2022-05-07T17:21:06Z")
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.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 7, 2022, 8:28pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/3 "2022-05-07T20:28:25Z")
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](https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/4)
---
### Author:  [@markersocial](https://meta.discourse.org/u/markersocial)
#### Post date: [May 8, 2022, 7:32am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/4 "2022-05-08T07:32:10Z")
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.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 11, 2022, 5:16pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/5 "2022-05-11T17:16:50Z")
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!
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 11, 2022, 8:15pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/6 "2022-05-11T20:15:51Z")
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](https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/6)
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 11, 2022, 8:40pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/7 "2022-05-11T20:40:22Z")
Fantastic! Only one issue, now the custom gate text options are not working
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 11, 2022, 8:56pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/8 "2022-05-11T20:56:16Z")
I checked your site and works for me. Maybe try a hard refresh or reopen the browser I think you see a cached version.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 11, 2022, 9:46pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/9 "2022-05-11T21:46:39Z")
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?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 11, 2022, 9:59pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/10 "2022-05-11T21:59:04Z")
Yes, this is what I see now.
I’ll try to check other browsers and devices.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 11, 2022, 11:29pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/11 "2022-05-11T23:29:09Z")
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! 🤣
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 12, 2022, 6:52am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/12 "2022-05-12T06:52:31Z")
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)
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 12, 2022, 1:45pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/13 "2022-05-12T13:45:54Z")
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.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [May 12, 2022, 2:21pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/14 "2022-05-12T14:21:33Z")
3 posts were split to a new topic: [Components not respecting text overrides](https://meta.discourse.org/t/components-not-respecting-text-overrides/226870)
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [May 17, 2022, 9:05am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/15 "2022-05-17T09:05:30Z")
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.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 17, 2022, 11:24am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/16 "2022-05-17T11:24:07Z")
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 🙂
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [May 17, 2022, 1:59pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/17 "2022-05-17T13:59:32Z")
Your English is fine, and there’s nothing wrong with your JavaScript, which is the important thing 🙂 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.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 17, 2022, 2:51pm UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/18 "2022-05-17T14:51:45Z")
> [@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.
---
### Author:  [@Himanshu\_Singh](https://meta.discourse.org/u/Himanshu_Singh)
#### Post date: [June 29, 2022, 12:40am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/19 "2022-06-29T00:40:31Z")
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?
---
### Author:  [@Himanshu\_Singh](https://meta.discourse.org/u/Himanshu_Singh)
#### Post date: [June 29, 2022, 4:17am UTC](https://meta.discourse.org/t/guest-gate-theme-component/225107/20 "2022-06-29T04:17:32Z")
I am having some configuration issues with Guest Gate when I am using SSO with [Discourse Connect](https://meta.discourse.org/t/13045?silent=true).
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?
[Next page](https://meta.discourse.org/t/guest-gate-theme-component/225107.md?page=2)