Online Users Widget - Vanilla Success
<main> <article class="userContent"> <p>The Online Users widget is a convenient way to display a list of users who are currently online in the community. The widget can be placed on any page of your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community.</p><p>The list of online users can be added in either of two ways; via the:</p><ul><li><strong>Online Users</strong> widget, as a pocket option that is available only after the Online addon has been enabled.</li><li><strong>Online</strong> addon option on the Addons page. This option does have some limitations, as described in <strong>Online Addon</strong>, below.</li></ul><h2 data-id="enable-the-online-addon">Enable the Online addon</h2><p>Regardless of which option you want to use to add the list of online users, the Online addon has to be enabled.</p><p>To enable the addon:</p><ol><li>Navigate to <strong>Dashboard > Settings > Addons</strong>.</li><li>Scroll down to <strong>Online</strong>, make sure it is enabled (as shown).</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/Xewo9WRpj9iYjKZRkC3qZFLhEU6Es6K6I5XAcRp2qjCf1RKWCwFw62-4pp8WCDO3EZybZ47FM17t6a202JtT-8lwqqPECSr_1T114M9PGxxn78layZFcX0I-LfLJ_dNgvJUUZRCY" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/Xewo9WRpj9iYjKZRkC3qZFLhEU6Es6K6I5XAcRp2qjCf1RKWCwFw62-4pp8WCDO3EZybZ47FM17t6a202JtT-8lwqqPECSr_1T114M9PGxxn78layZFcX0I-LfLJ_dNgvJUUZRCY" alt="image.png" height="77" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The addon is enabled and both options are available.</p><ul><li>To <strong>continue with the addon option</strong>, refer to the next section, <strong>Online Addon</strong>.</li><li>To <strong>add the widget</strong>, refer to the section, <strong>Online Users Widget</strong>, in this article.</li></ul><p>✔️ <strong>TIP</strong>: Be sure to test your preferred option on your staging site before committing it to your production site.</p><h3 data-id="manage-the-list's-display-options">Manage the list's display options</h3><p>If you plan to use the widget option, we recommend that you disable the addon's display setting in order to prevent the list of users displaying twice on your community pages.</p><ul><li>Choose <strong>I'll place it manually with my theme</strong> from the <strong>Where should the Online list be displayed</strong> option in the addon's settings. </li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/cyz45UpLxArE4GvEYQHrIgIG1UJWc5FGiCCy4EzyTZiI1TKbCJF0WI7YBXSJ9-tpRcuWKbiLSP8tg7ChXCVVTDDqjI_rzt61K79DOZW1M41CLVa-HPu6Op1sQyyskYNHgnKjsWx4" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/cyz45UpLxArE4GvEYQHrIgIG1UJWc5FGiCCy4EzyTZiI1TKbCJF0WI7YBXSJ9-tpRcuWKbiLSP8tg7ChXCVVTDDqjI_rzt61K79DOZW1M41CLVa-HPu6Op1sQyyskYNHgnKjsWx4" alt="User: "cyz45UpLxArE4GvEYQHrIgIG1UJWc5FGiCCy4EzyTZiI1TKbCJF0WI7YBXSJ9-tpRcuWKbiLSP8tg7ChXCVVTDDqjI_rzt61K79DOZW1M41CLVa-HPu6Op1sQyyskYNHgnKjsWx4"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="online-addon">Online addon</h2><p>Before using this option, review the following notes.</p><ul><li>This option does not allow you to choose/set where the list of users displays; it is "sticky" in the side panel in every page.</li><li>You can select the option to place it manually within your theme, at which point, it will follow the rules set by the Online pocket-widget.</li><li>If you prefer to control where the list of users displays, use the more configurable Online Users widget option.</li></ul><p>To use the addon option:</p><p>1. After you've enabled the Online addon, click the <strong>settings</strong> icon.</p><p>2. Use the options to set:</p><ul><li>Where the list of users will appear</li><li>Whether to include users for the entire site or just that category</li><li>How the users will display: User Icons (avatar) or User Links (name as hyperlink)</li><li>Whether to display the list to guests</li><li>How long the user while remain "online" after visiting a page</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/v-LUChRzt0AgzpROkUmJIyH22ipW6pEGEzSJcuXtfO1jdH9An7NYg0kqJGIYwOOHQhElpiwlNhu-cR6heqoStVmq1PV698Iw50v9fcqWHjHYrWehNy6g1uorpjXEDCEmEWLS158i" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/v-LUChRzt0AgzpROkUmJIyH22ipW6pEGEzSJcuXtfO1jdH9An7NYg0kqJGIYwOOHQhElpiwlNhu-cR6heqoStVmq1PV698Iw50v9fcqWHjHYrWehNy6g1uorpjXEDCEmEWLS158i" alt="image.png" height="311" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Click <strong>Save</strong>.</p><ul><li>Refer to <strong>Users list displays</strong>, below, for examples of how the list appears on your community pages.</li></ul><h2 data-id="online-users-widget">Online Users widget</h2><p>You can add the list of online users widget as a pocket option.</p><p>📝 <strong>NOTE</strong>: This widget requires that the Online addon be enabled; this is described above.</p><p>This option gives you the flexibility to place the widget on any page of your Vanilla community.</p><p>✔️ <strong>TIP</strong>: We recommend that you disable the addon's location setting in order to prevent the list of users displaying twice on your community pages. The option to do this is <strong>I'll place it manually with my theme</strong>.</p><p>To add and configure a Pocket:</p><p>1. Navigate to <strong>Dashboard > Settings > Pockets</strong>.</p><p>2. Click the <strong>Add Pocket</strong> button.</p><p>3. Specify a Name (e.g., <em>Online Users Widget</em>) for your pocket.</p><p>4. Select <strong>Online Users</strong> as the Type.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/h4kpiDFCSAZyAhGeyE91GbD973SQ18a2Tor_E-g2Bolx-dDtuN74LcgIWhmYO-h4yE5QAH9IVw5ut5MS7ZHwH2HN4ReI3aDDWJ-i0_HHECHTQPY7DoHRy2aAkwUBJD6fIsD9u9EO" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/h4kpiDFCSAZyAhGeyE91GbD973SQ18a2Tor_E-g2Bolx-dDtuN74LcgIWhmYO-h4yE5QAH9IVw5ut5MS7ZHwH2HN4ReI3aDDWJ-i0_HHECHTQPY7DoHRy2aAkwUBJD6fIsD9u9EO" alt="h4kpiDFCSAZyAhGeyE91GbD973SQ18a2Tor_E-g2Bolx-dDtuN74LcgIWhmYO-h4yE5QAH9IVw5ut5MS7ZHwH2HN4ReI3aDDWJ-i0_HHECHTQPY7DoHRy2aAkwUBJD6fIsD9u9EO" height="324" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Click <strong>Save</strong>.</p><p>6. Click the <strong>Placement & Conditions</strong> tab to set the placement options as described in <a href="https://success.vanillaforums.com/kb/articles/19-pockets#working-with-pockets" rel="nofollow noreferrer ugc">working with pockets</a>.</p><h2 data-id="users-list-displays"><strong>Users list displays</strong></h2><p>When the list of online users is set up via the Online addon, it will display in different ways on different pages. Below are examples of these displays: <strong>Homepage</strong> and <strong>Category page</strong>.</p><h4 data-id="homepage">Homepage</h4><p>The list includes the entire community.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/1qYMSqKPlgOqCRuO5kEEPELvV8gRUydzymU_DZgYI_q1zWDp2SwAWZSuJS9bg_nvFYtilf5j5ohbpwaYhhrDsdLMMQPqB-ngFbcqLtXSYIZH8rZusk7mQzQss1OXNESVLliwhMNk" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/1qYMSqKPlgOqCRuO5kEEPELvV8gRUydzymU_DZgYI_q1zWDp2SwAWZSuJS9bg_nvFYtilf5j5ohbpwaYhhrDsdLMMQPqB-ngFbcqLtXSYIZH8rZusk7mQzQss1OXNESVLliwhMNk" alt="image.png" height="461" width="313" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="category-page">Category page</h4><p>The list is exclusive to the present category.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/lfXWS2qo4STOVzD237rFDdNkRm0210oZfLVUm2lg5g5NNGyoaFAv8AXyAwmc7Z3IdE0xZS3s1moZewP_7-GcR1WpNhJrgAWciWRWpljQS_JLHDf2318tAtABZvABjbulxvJSi5VE" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/lfXWS2qo4STOVzD237rFDdNkRm0210oZfLVUm2lg5g5NNGyoaFAv8AXyAwmc7Z3IdE0xZS3s1moZewP_7-GcR1WpNhJrgAWciWRWpljQS_JLHDf2318tAtABZvABjbulxvJSi5VE" alt="image.png" height="447" width="272" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="opt-out-of-%22who's-online%22"><strong>Opt out of "Who's Online?"</strong></h2><p>Users can edit their profiles so that their online status does <strong>not</strong> display. If they do so, they will <strong>not</strong> be listed in the "who's online" list for either the addon or the widget.</p><p>✔️ <strong>TIP</strong>: Consider providing these instructions to your users so that they can manage their own preferences.</p><p>To opt out of the "who's online" display list:</p><p>1. Navigate to your profile and select <strong>Edit Profile</strong> from the dropdown.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/Fej9IIi1qiEGDIxsei76Od2sNAsuWXOrNL4X5zQWb8o58JjYUPYhtDnElRD2EUsBX1cVab9m1npFWb4mpvKCTGoDlCrAjZgo92CnmuV3l8fHZU7Ew1njpDxpMXL6Z6diBVZ1w_hT" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/Fej9IIi1qiEGDIxsei76Od2sNAsuWXOrNL4X5zQWb8o58JjYUPYhtDnElRD2EUsBX1cVab9m1npFWb4mpvKCTGoDlCrAjZgo92CnmuV3l8fHZU7Ew1njpDxpMXL6Z6diBVZ1w_hT" alt="Fej9IIi1qiEGDIxsei76Od2sNAsuWXOrNL4X5zQWb8o58JjYUPYhtDnElRD2EUsBX1cVab9m1npFWb4mpvKCTGoDlCrAjZgo92CnmuV3l8fHZU7Ew1njpDxpMXL6Z6diBVZ1w_hT" height="211" width="564" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>2. Click <strong>Who’s Online</strong> in the sidebar.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/u-h7W80a7FFPzzurmvW_yg0xuLkUUQCl5weiltBDs6Of64nsv-nT-XR8srUAXJ_OP8KIcftwqwMZ5CDMEVWgSKq45FmMX57uqmMdHiQtDrhtyoifwmrFmk-b3sL40Y5MFpJ1mwNm" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/u-h7W80a7FFPzzurmvW_yg0xuLkUUQCl5weiltBDs6Of64nsv-nT-XR8srUAXJ_OP8KIcftwqwMZ5CDMEVWgSKq45FmMX57uqmMdHiQtDrhtyoifwmrFmk-b3sL40Y5MFpJ1mwNm" alt="Screen Shot 2021-02-25 at 5.40.12 PM.png" height="449" width="235" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Check the <strong>Hide my online status from other members</strong> box and click <strong>Save</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/DN0V9D1WF4QE/user-hide-status.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/DN0V9D1WF4QE/user-hide-status.png" alt="User Hide status.png" height="259" width="620" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="widget-display-settings">Widget display settings</h2><p>The widget and its contents inherit their properties from the <strong>Global Styles</strong> settings in <a href="https://success.vanillaforums.com/kb/articles/279-style-guide-editor-overview" rel="nofollow noreferrer ugc">Theme Editor</a>. These settings determine the appearance of the widgets on your community pages.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/AHUBLHQBZU6B/theme-globalstyles-for-widgets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AHUBLHQBZU6B/theme-globalstyles-for-widgets.png" alt="Theme_GlobalStyles for widgets.png" height="622" width="1255" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: Currently, it is <strong>not</strong> possible to format (i.e., change the properties) the widget elements individually.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/INBABBCM7652/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/INBABBCM7652/theme-globalstyles-settings.png" alt="Theme_GlobalStyles_settings.png" height="390" width="360" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>The widgets in your Vanilla community inherit most of their properties from the <strong>Global Styles</strong> settings. Some examples of this that are on several widgets are:</p><ul><li><em>Background</em> color is inherited from the <strong>Background</strong> setting.</li><li><em>Title</em>, <em>Description</em>, and <em>article link</em> colors are inherited from the <strong>Text</strong> setting.</li><li><em>View All link</em> and <em>username link </em>colors are inherited from the <strong>Links</strong> setting.</li><li><em>Subtitle</em> and <em>hover-over</em> colors are inherited from the <strong>Brand Color</strong> setting.</li></ul><p><br></p> </article> </main>