dreamforce 2016: build your donor community: integrating npsp to your online presence

Build Your Donor CommunityIntegrating NPSP to Your Online Presence

Chris EalesChief ArchitectBrightGen

chriseales@brightgen.com@theEalesie

Chris EalesChief Architect, BrightGen

Introduction From here From here, or here From here, or here, to here

Power of Community Builder

Tools used in this demo

• Non-Profit Success Pack

• Salesforce Community Builder• Napali Template

• BrightGiving Components• BrightGiving_CampaignDonation Lightning Component• Opportunity Online Contact Custom Fields• Create Contact Process Builder Flows

• Asperato Payment Gateway Platform

Online donations in twenty minutes

DemoLets build our community

Questions

thank y u

Hands on

Hands onBuild your own community

Hands on steps – Login to Developer Org

• Login to Developer Org at: https://login.salesforce.com• Username: handson@communitydemo.org• Password: CommunitiesRock

Hands on steps – Campaign Configuration

• Create a New Campaign Layout• Setup >> Search “Campaign” >> Select Page Layouts • Select Edit against an existing layout [ Sample Online

Layout ] >> Select Save As >> Provide a Page Layout Name – remember this as you will need it later

• Modify layout by adding / removing fields you want visible in the Community and Save the layout

Hands on steps – Campaign Configuration

• Create a New Campaign List View• Access Campaigns Tab and create a new List View

• Give the new view a name• Select filter criteria to restrict to the Campaigns want visible

in the Community [ parentId = 7015800000010Qh ]• Select the fields you want visible in the Community

[ Campaign Name, Start Date, End Date, Total Value Won Opportunities ]

• Set Visibility to all users

Hands on steps – Community Setup

• Activate a Community• Setup >> Search Communities >> Select All

Communities• Click New Community button• Choose Napili Template• Provide Community Name and URL suffix

• Note down the URL Suffix as you will need this later to view your community

• Click Create Community

• Community Management Settings• Select Administration >> Preferences Menu and within

the General section• Allow public access to Chatter• Click Save

• Force.com Site Configuration• Navigate to the Force.com Site Setup from the

Community Management drop down menu•Click the Public Access Settings button

• Force.com Public Access Settings• Navigate to the Page Layouts section

• Set Campaign Page Layout to be the layout you created earlier

• Navigate to the Record Type Settings section• Update Opportunities Record Type so that only Online

Donation is available• Force.com Site Setup from the Community Management

drop down menu

• Force.com Public Access Settings• Edit the profile and navigate to Object Permissions and

set• Accounts / Contacts / Opportunities – Read and Create• Campaigns – Read• Payments – Read, Create and Edit

• Save the changes

• Community Builder - Edit Navigation Bar• From Setup search Communities >> Select All

Communities >> Select Builder against your new Community

• Once in the Community Builder select Page Editor icon from the left navigation menu

• Select Navigation Bar within the Page Editor section• Select Edit Navigation Menu from within the Property

Editor section

• Community Builder - Edit Navigation Menu• Click Add Menu Item button and fill out the form

• Name - Our Campaigns• Type - Salesforce Object• Object Type - Campaign• Default List View - Select the list view created earlier• Publicly available - True

• Publish Changes• Click Publish Changes button• Select OK in Publish Changes Now dialog box

• Community Builder - New Campaign Page• Select Page Editor icon from the left navigation menu•Click New Page Icon•Select Create Object Pages•Select Campaign object in the New Object Pages dialog box

•Click Create button•Select Campaign Detail from Object Pages List•Click Edit button

• Community Builder - Edit Campaign Page Layout• Select Change Layout from Property Editor• Select 2 columns with a 2:1 ratio in the Change Layout

dialog box• Click change button

• Community Builder - Edit Campaign Details Section• Select Record Information Tabs from the Page Editor

section• Note the page layout matches that set for your logged in

user, not what we have assigned to the Public profile• Update the Record Information Tabs properties in the

Property Editor• note changes are automatically applied and saved• Set Tab 2 Type to None• Set Tab 3 Type to None

• Community Builder - Add BrightGiving Campaign Payment Lightning Component• Scroll the Lightning Component section down to

Custom Components• Scroll the Page Editor section to the empty Sidebar

region• Drag the BrightGiving_CampaignDonations lightning

component into the empty Sidebar region

• Community Builder - Branding - Logo• Select Branding Editor icon from the left navigation

menu• Select Company Logo component within the Branding

Editor section to upload a logo• Select a local image to use as the company logo

• Community Builder - Branding - Color Scheme• Select Upload an image to generate a new palette from

the Branding Editor section• Click Use Company Logo button to Generate a Palette• Update Action Color to match Link Color

• Community Builder - Branding - Custom CSS• Select Edit Custom CSS from the Branding Editor

section• Add the following CSS (using your preferred color

schemes) and click Save button/* Control the background color of the Header Panel */.default-bg-overlay { background: white none repeat scroll 0 0 !important;}/* Control the background color of the Navigation Bar */.siteforceNapiliBody .cNavBarCon { background-color: #696969;}

Hands on steps - Publish and Preview

• Community - Publish• Select the Publish Button from with the Community

Builder• Select Got It from the Publish Your Community dialog box

• Community - Preview• Open a new browser and access your newly created

community• https://brightgiving-df17-demo-developer-edition.eu6.force.c

om/livedemo• Note: replace live demo with the URL suffix used during

the initial community setup• Browse to a campaign and complete donation form

See Results

• Salesforce New Opportunity• Return to the Salesforce Developer Org• Search Campaign you donated to• Browse the Campaign detail record• See your new Donations in the Opportunities related list

LayoutsThe following slides are the basic, default layout options built into the template

Basic Layout

First level text is set at 20 point Arial and does not have a bullet• Second line bullets are 18 point Arial

• Third level text is set at 16 point Arial• Limit the number of bullets on a slide

• Fourth level text

How to Create a Paragraph HeadingUse the same Basic Layout and remove second line bullet from sentence

Spacing of ParagraphsThe spacing between paragraphs is automatically set

Subtitle placeholder 24 points

2-Column Gray Layout

Either of these placeholders can hold text, table, charts, smart art, or media.

Subtitle placeholder

3-Column Gray

These three placeholders can hold text, table, charts, smart art, or media.

Lorem ipsum dolor sit amet, consectetur

Cras egestas mauris ut faucibs cursus

Pellentesque et risus ac turpis maximus

Cras egestas mauris ut faucibus cursus

Content Content Content

Subtext placeholderSubtext placeholder Subtext placeholder

3-Column With Titles Subtitle placeholder

Content

Content Content Content

Split 4-Column Layout

Vertical Split LayoutSubtitle placeholder

Photo Content LayoutSubtitle placeholder

Drag picture to placeholder or click icon to add

Third Split Layout

Text, images, charts, tables can be put in this placeholder.

Use the stage for highlighting devicesStage Content Panel Layout

Placeholder text

Third Split 2 Layout

Text, images, charts, tables can be put in this placeholder.

“I believe that this is a quote for everyone.”Person, Organization

Story Slide with Quote Bullets are set in 20 point Arial

Drag picture to placeholder or click icon to add

Basic Dark Layout

This slide is made for easy layout of text, charts, tables, images, and other media

First level text is set at 20 point Arial• Second line bullets are 18 point Arial

• Third level text is set at 16 point Arial• Limit the number of bullets on a slide

• Fourth level text

Fifth level text for text sourcing

Example of subtly highlighted text

Example of boldly highlighted text

Segue/DividerSubtitle placeholder

Example of a Table Table title or slide subtitle

Intro heading text

Key takeaway text here, table title text hereSome additional detail text. If this table is presented in large room, do not use this chart, because it will be too smallto read.

If this is going to be presented online or other personal presentation space, this text is as small as it should go.

Column title, can be multi-line

Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse congue turpis maximus dignissim posuere.Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse congue turpis maximus dignissim posuere.Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.

Column title Column title Column title

Column title Column title Column titleRow title Lorem ipsum dolor sit amet,

consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Source: placeholder #DF16

Example of a Table

Column title Column title Column title

Row title $00.00 $00.00 $00.00

Table title or slide subtitle

Graphic Assets

Mobile Phones and Watches Devices are to scale in relationship to one another, use this slide as a

reference

iPadAir Vertical 2 iPhone6 Galaxy 6 Apple Watch

iPadAir Horizontal 2 LG3

Computers

Macbook Pro Retina Display(Browser bar is removable)

Thunderbolt Monitor for Desktop(Browser bar is removable)

Salesforce.org Logo Vertical stacked (Primary)

In colorSalesforce Brand Extension Logos

Salesforce Brand Extension LogosIn white

In colorAdditional Logos

Additional LogosIn white

Salesforce1 Logos

The Power of Community Builder From here to there

dreamforce 2016: build your donor community: integrating npsp to your online presence

Technology

dreamforce 2008

dreamforce command center

dreamforce news 2017

introducing npsp 3.0

loic dreamforce 2011

a history of dreamforce

npsp – structure and function national polio surveillance...

dreamforce '16

npsp workflow diagrams - amazon web services

pardot - dreamforce: why integrated marketing automation is...

getting started with npsp planning guide

dreamforce recap deck

dreamforce citybiz

dreamforce presentation - fliptop + insideview

dreamforce 2012 keynote

dreamforce '16 jetpack

capgemini dreamforce 2017

omega dreamforce 2017

dreamforce jetpack

dreamforce guide – become a connected campus ·...