dreamforce 2016: build your donor community: integrating npsp to your online presence
Post on 12-Apr-2017
178 Views
Preview:
TRANSCRIPT
#DF16
Build Your Donor CommunityIntegrating NPSP to Your Online Presence
Chris EalesChief ArchitectBrightGen
chriseales@brightgen.com@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: handson@communitydemo.org• Password: CommunitiesRock
#DF16
Hands onBuild your own community
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 onBuild your own community
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 onBuild your own community
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
Hands onBuild your own community
Hands on steps – Community Setup
• Community Management Settings• Select Administration >> Preferences Menu and within
the General section• Allow public access to Chatter• Click Save
#DF16
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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
Hands onBuild your own community
Hands on steps – Community Setup
• 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 onBuild your own community
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
#DF16
Hands onBuild your own community
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.
These three placeholders can hold text, table, charts, smart art, or media.
These three placeholders can hold text, table, charts, smart art, or media.
Subtitle placeholder
#DF16
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibs cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Content Content Content
Subtext placeholderSubtext placeholder Subtext placeholder
3-Column With Titles Subtitle placeholder
#DF16
Content
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Content Content Content
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Split 4-Column Layout
#DF16
Vertical Split LayoutSubtitle placeholder
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
#DF16
Photo Content LayoutSubtitle placeholder
Drag picture to placeholder or click icon to add
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
#DF16
Third Split Layout
Text, images, charts, tables can be put in this placeholder.
Subtitle 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.
Subtitle 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
Subtitle placeholder
#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
Column title, can be multi-line
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse congue turpis maximus dignissim posuere.Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
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.
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
Example of a Table Table title or slide subtitle
Column title Column title Column title
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse congue turpis maximus dignissim posuere.Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
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.
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 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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a Table Table title or slide subtitle
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
top related