Help Center Home Widget - HL Vanilla Community
<main> <article class="userContent"> <p>The Help Center Home widget is a great way to feature a <strong>Knowledge Base</strong> (<strong>KB</strong>) Help Center on a page (such as your homepage) in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community.</p><p>📝 <strong>NOTE</strong>: Unlike some of the other widgets, you <strong>cannot</strong> add this widget to a page via Layout Editor.</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/258ACEXZSK4U/screen-shot-2021-06-28-at-11-48-32-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/258ACEXZSK4U/screen-shot-2021-06-28-at-11-48-32-am.png" alt="Screen Shot 2021-06-28 at 11.48.32 AM.png" height="780" width="1570" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: You can feature only Help Center-style knowledge bases, <em>not Guide types</em>. To learn the difference, see <a href="https://success.vanillaforums.com/kb/articles/344-knowledge-base-training" rel="nofollow noreferrer ugc">Knowledge Base Training</a>.</p><p>Up to five, linked article titles, per knowledge base category, display in the widget; users can click a title to visit the article or click <strong>View All</strong> to access the full category.</p><p>📝 <strong>NOTE</strong>: Empty categories have the option to create an article.</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/W21KVZ6P1FY3/screen-shot-2021-06-28-at-11-48-58-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/W21KVZ6P1FY3/screen-shot-2021-06-28-at-11-48-58-am.png" alt="Screen Shot 2021-06-28 at 11.48.58 AM.png" height="1104" width="1570" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="set-up-the-help-center-home-widget"><strong>Set up the Help Center Home widget</strong></h2><p>To add this widget to your site, you must set up your Help Center-style KBs and add some articles. Then:</p><p>1. Navigate to <strong>Dashboard > Settings > Pockets</strong>.</p><p>2. Click the <strong>Add Pocket</strong> button.</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/15VN52TGQZHR/screen-shot-2021-06-28-at-11-49-13-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/15VN52TGQZHR/screen-shot-2021-06-28-at-11-49-13-am.png" alt="Screen Shot 2021-06-28 at 11.49.13 AM.png" height="588" width="1532" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Specify a Name for your pocket.</p><p>4. Select <strong>Help Center Home</strong> as the Type.</p><p>The section adjusts to present just the Knowledge Base option:</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/W22ZQMEKX6CJ/screen-shot-2021-06-28-at-11-52-21-am.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/W22ZQMEKX6CJ/screen-shot-2021-06-28-at-11-52-21-am.png" alt="Screen Shot 2021-06-28 at 11.52.21 AM.png" height="798" width="1324" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Select which knowledge base you would like to showcase.</p><p>📝 <strong>NOTE</strong>: The various Help Center style options should appear. If the KB you want doesn’t appear, check to see whether it is set up as a Guide.</p><p>6. Click <strong>Save</strong>.</p><p>7. Click the <strong>Placement & Conditions</strong> tab to set those 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><p>✔️ <strong>TIP</strong>: Be sure to test the widget in various locations on your staging site to decide where it looks best; then set it up on your production site.</p><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/XBZKUAVK95SP/theme-globalstyles-for-widgets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XBZKUAVK95SP/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/88C920O14IEH/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/88C920O14IEH/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>