Launchpad Widget - Large | Communifire Documentation

You can create a page to launch into your other apps. It will look something like this:

1. Create a Page Builder page.

2. Drag a 12 column row onto the page.

3. Drag a Raw HTML widget onto the page.

4. Doubleclick into the Raw HTML widget and add the following HTML into the window:

        <div class="axero-widget">
            <div class="axero-widget-header">
                <h3>
                    Launchpad
                </h3>
            </div>
            <div class="axero-widget-content">
                <div class="ax-app-logos">
                    <ul class="thumbnails">
                        <li class="span3">
                            <a href="https://www.namely.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/app-namely.png"></span> <span class="thum-word">Namely</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://app.bamboohr.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/bamboohr_v2.png"></span> <span class="thum-word">BambooHr</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://account.box.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/box.png"></span> <span class="thum-word">Box</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://signin.webex.com/collabs/auth"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/cisco-webex-logo.jpg"></span> <span class="thum-word">Webex</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.citrixonline.com/login?service=https%3A%2F%2Fglobal.gotomeeting.com%2Fj_spring_cas_security_check"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/citrix-go-to-meeting.png"></span> <span class="thum-word">GoToMeeting</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://account.docusign.com/#/username"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/docusign.png"></span> <span class="thum-word">Docusign</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://www.dropbox.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/dropbox.png"></span> <span class="thum-word">Dropbox</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://github.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/github.png"></span> <span class="thum-word">Github</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://id.atlassian.com/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/jira.png"></span> <span class="thum-word">Jira</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://www.linkedin.com/uas/login"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/linkedin.png"></span> <span class="thum-word">LinkedIn</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.mailchimp.com/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/mailchimp.png"></span> <span class="thum-word">Mailchimp</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.marketo.com/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/marketo.png"></span> <span class="thum-word">Marketo</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.microsoftonline.com/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/office365.png"></span> <span class="thum-word">Office 365</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://qbo.intuit.com/c1/v1702.1434/0/login?redirect=true"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/quickbooks.png"></span> <span class="thum-word">Quickbooks</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://login.salesforce.com"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/salesforce.png"></span> <span class="thum-word">Salesforce</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://slack.com/signin"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/slack.png"></span> <span class="thum-word">Slack</span></a>
                        </li>
                        <li class="span3">
                            <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/applogos/workday.png"></span> <span class="thum-word">Workday</span></a>
                        </li>
                        <li class="span3">
                            <a href="https://www.zendesk.com/login/"
                                target="_blank"
                                class="thumbnail"><span class="thumb-icon"><img src="https://cdn.communifire.com/widgets/applogos/zendesk.png"></span> <span class="thum-word">Zendesk</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

5. Save the widget.

6. Publish the page. 

7. Copy the CSS below and paste it into Control Panel > System > CSS Overrides .

.ax-app-logos{padding:20px 20px 10px;}
.ax-app-logos ul{margin:0 0 4px;padding:0;}
.ax-app-logos li{margin-bottom:30px;margin-top:0;}
.ax-app-logos li a.thumbnail{color:inherit;text-align:center;background:#fff;border:1px solid #dfdfdf;box-shadow:0 0 0 transparent;padding:10px 0;font-weight:400;height:100px;position:relative;}
.ax-app-logos li a.thumbnail .thumb-icon{display:block;}
.ax-app-logos li a.thumbnail .thumb-icon img{margin:auto;max-width:74%;max-height:55%;width:auto;position:absolute;top:-15px;left:0;right:0;bottom:0;}
.ax-app-logos li a.thumbnail .thum-word{font-size:12px;background:#f9f9f9;border-radius:0 0 4px 4px;position:absolute;bottom:0;left:0;right:0;border-top:solid 1px #dfdfdf;padding:3px 0;}
.ax-app-logos li a.thumbnail:hover{text-decoration:none;}
.ax-app-logos li:nth-child(4n+1){margin-left:0;}

8. Save the CSS Overrides .

9. Then view your page. 

You can customize the logos and choose the apps that you'd like to link to by editing the Raw HTML code.

Let us know if you have any questions in the Support Forums.