Launchpad Pagebuilder widget | Community Development | Sandbox ConnAct

The Launchpad is a custom widget that you can use to provide hyperlinks to launch into your other systems.

How to Create

Go to  Page Builder and edit the page you want to add this widget to. Then drag a RawHTML widget onto the page. Edit the widget properties and type Launchpad for the widget Title and copy/paste the HTML below into the widget RawHTML textbox. You can edit the HTML as you need.

HTML

<div class="axero-widget">
    <div class="axero-widget-header">
        <h3>Launchpad</h3>
    </div>
    <div class="axero-widget-content">
<div class="ax-app-buttons">
  <ul class="thumbnails">
  <li class="span4">
    <a href="https://workforcenow.adp.com/public/index.htm" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/adp.png" /></span>
      <span class="thum-word">Payroll</span>
    </a>
  </li>
      <li class="span4">
    <a href="https://login.salesforce.com/" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/salesforce.png" /></span>
      <span class="thum-word">Salesforce</span>
    </a>
  </li>
      <li class="span4">
    <a href="https://www.workday.com/en-us/signin.html" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/workday.jpeg" /></span>
      <span class="thum-word">Workday</span>
    </a>
  </li>
  <li class="span4">
    <a href="https://drive.google.com/drive/" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/google.jpeg" /></span>
      <span class="thum-word">Google Docs</span>
    </a>
  </li>
      <li class="span4">
    <a href="https://app.hubspot.com/login/" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/hubspot.jpeg" /></span>
      <span class="thum-word">Marketing</span>
    </a>
  </li>
      <li class="span4">
    <a href="http://www.paychex.com/login/" target="_blank" class="thumbnail">
      <span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/launchpad/paychex.jpeg" /></span>
      <span class="thum-word">Paychex</span>
    </a>
  </li>
</ul>
</div>
    </div>
</div>

CSS

Navigate to Control Panel > System >  CSS Overrides .  Copy/paste the CSS below into the CSS Overrides window. Then click Save CSS Overrides.

.ax-app-buttons {padding: 20px 20px 10px; background: #f9f9f9 none repeat scroll 0 0;}
.ax-app-buttons ul{margin:0 0 4px 0;padding:0;}
.ax-app-buttons li{margin-bottom:6px;margin-top:0}
.ax-app-buttons li a.thumbnail{color: inherit;text-align:center;background:#fff;border:1px solid #dfdfdf;box-shadow:0 0 0 transparent;padding:10px 0px;font-weight:normal;}
.ax-app-buttons li a.thumbnail .thumb-icon{display:block;}
.ax-app-buttons li a.thumbnail .thumb-icon img{width:30px;border-radius:5px}
.ax-app-buttons li a.thumbnail .thum-word{font-size:12px;}
.ax-app-buttons li a.thumbnail:hover{text-decoration:none;  }
.ax-app-buttons li:nth-child(3n+1) {margin-left: 0;}

Images

The images are uploaded to a Communifire CDN and are linked in the HTML above. You can use those images or use your own.

You can use your own images, you just need them hosted. You can host them somewhere yourself or you can upload the images to  Files and use the image path in the  View File page. You could create a private space called "Media Assets" and mark Guest > View for files in permissions for better organization.

On the View File page, right click on the image and copy the image url address, don't use the web address of the View File page.

Image URL Example: /fileattachment?file=M8Pxz7qrnyj%2FPuRo27yPpg%3D%3D&v=1