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

#DF16

Build Your Donor CommunityIntegrating NPSP to Your Online Presence

Chris EalesChief ArchitectBrightGen

[email protected]@theEalesie

#DF16

Chris EalesChief Architect, BrightGen

#DF16

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

#DF16

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

#DF16

DemoLets build our community

#DF16

Questions

thank y u

#DF16

#DF16

Hands on

#DF16

Hands onBuild your own community

Hands on steps – Login to Developer Org

• Login to Developer Org at: https://login.salesforce.com• Username: [email protected]• Password: CommunitiesRock

https://login.salesforce.com/

#DF16


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

#DF16


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

#DF16


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

#DF16



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

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

#DF16



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

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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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

#DF16



• 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;}

#DF16


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

https://brightgiving-df17-demo-developer-edition.eu6.force.com/livedemo

https://brightgiving-df17-demo-developer-edition.eu6.force.com/livedemo

#DF16


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

#DF16

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

#DF16

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

#DF16

2-Column Gray Layout

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

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

Subtitle placeholder

#DF16

3-Column Gray

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




#DF16

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

#DF16

Content










Content Content Content




Split 4-Column Layout

#DF16

Vertical Split LayoutSubtitle placeholder




#DF16

Photo Content LayoutSubtitle placeholder

Drag picture to placeholder or click icon to add




#DF16

Third Split Layout

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


#DF16

#DF16

Use the stage for highlighting devicesStage Content Panel Layout

Placeholder text

#DF16

Third Split 2 Layout

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


#DF16

“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

#DF16

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


#DF16

Segue/DividerSubtitle placeholder

#DF16

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.





#DF16


Column title Column title Column title







#DF16

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

Row title $00.00 $00.00 $00.00

Row title $00.00 $00.00 $00.00

Row title $00.00 $00.00 $00.00

Row title $00.00 $00.00 $00.00

Table title or slide subtitle

#DF16

Graphic Assets

#DF16

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

#DF16

Computers

Macbook Pro Retina Display(Browser bar is removable)

Thunderbolt Monitor for Desktop(Browser bar is removable)

#DF16

Salesforce.org Logo Vertical stacked (Primary)

#DF16

In colorSalesforce Brand Extension Logos

#DF16

Salesforce Brand Extension LogosIn white

#DF16

In colorAdditional Logos

#DF16

Additional LogosIn white

#DF16

Salesforce1 Logos

#DF16

The Power of Community Builder From here to there

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

Technology