This presentation is a guide to get started with the IBM Connections Engagement Center (aka XCC).

1. Get Started with
IBM Digital Workplace Hub
Create your first
XCC Landing Pages

2. 2
Introduction
Add Your First Widget
Configure Your Widget
Add More Widgets
Apply Your Corporate Identity
Next Steps
Table of Content

3. 3
Introduction

4. 44
Goal of this Presentation
After the installation of XCC you will have access to your first empty XCC page. This
presentation will show you how to create your first landing page. You will need the role “XCC
Admin” to proceed as described.

5. 5
This presentation will reference documents for further study. These documents are also
part of your installation package.
Full XCC user documentation on how to use XCC and its features
(http://www.slideshare.net/timetoact/xcc-120-documentation)
Technical documentation on installing and configuring XCC
(http://www.slideshare.net/timetoact/technical-users-guide-for-xcc-12)
Documents for Further Study

6. 6
To create your first XCC landing page you need content within IBM
Connections.
Minimum requirements for this example:
A global company community with
News (blog entries)
Static information, e.g. processes, about (wiki pages)
Links to important applications / information (bookmarks)
Documents, e.g. templates for letters, business reports (files)
Events (events can be set repeating for years)
Further communities for service units / projects / teams – depending on
your story / needs
Sample Content Required

7. 7
Add Your First Widget

8. 88
Admin Panel & Placeholders
Clicking the customize button
will bring up the admin panel
and show the placeholders for
the widgets (grid)

9. 99
Create a Widget I
Click on "Create Widget" to
add a widget

10. 1010
Create a Widget II
Select the widget type
Set an ID for your widget
Click on "Create"

11. 1111
Add a Widget to the Page
Your widget is now added to
your repository
Assign the widget to a
placeholder by clicking on it

12. 12
Configure Your First
Widget

13. 1313
Open the Widget Editor
Your first widget is now placed
in the grid
Click on the button in the top
right corner of the widget to
open the widget editor

14. 1414
Configuring a Widget
Start typing in the source field
and then select the
community where your
blogposts are located
Choose "Slider" style to show
more than one post in the
widget
Save widget

15. 15
Add More Widgets

16. 1616
Add a News Channel Widget
Your first widget is configured
Add the next widget to your
grid, using the same
procedure as shown before
for the widget type News
Channel
Add the News Channel widget
and open its widget editor

17. 1717
Configure News Channel Widget I
Fill in a source community
Name your channel

18. 1818
Configure News Channel Widget II
Click on "Add Channel"
Fill out "Source" and "Name"
for your second channel
Save widget

19. 1919
Drag & Drop I
Assign the Top News & News
Channel widget to a different
placeholder by using drag &
drop
Move over the header of the
widget to activate the drag &
drop

20. 2020
Drag & Drop II
Move the widgets while
holding the mouse key down
Let it „fall“ into the desired
placeholder when the green
highlight appears
Exchange placeholders by
letting it „fall“ onto an
placeholder filled with
another widget

21. 2121
Add & Configure a News Widget
Add the next widget to your
grid, using the same
procedure as shown before
for the widget type News
Add the News widget and
open its widget editor
Configure your new widget to
show a slider
Make it display only three of
the latest posts from a
community blog

22. 2222
Add & Configure a Links Widget
Add a Links widget and drag it
to a placeholder
The links widget will display
links from a specified
community
Choose a source community

23. 2323
Add & Configure a Files Widget
Add a Files widget and drag it
to a placeholder
Select a source community for
the files
Add a second channel
Provide source and name for
the second channel

24. 2424
Add & Configure an Events Widget
Add an events widget
Configure a source community
Add multiple channels and
configure
Select Layout "Month"

25. 2525
Add & Configure a Media Gallery Widget
Add a Media Gallery widget
Select a source community
Select "Slider" style

26. 2626
Your XCC page now has
plenty of widgets
configured
Click the Customize Button
to stop editing your XCC
page
Empty placeholders will not
be displayed out of the
customize mode
Your First Page is Ready

27. 27
Apply your Corporate
Identity

28. 2828
How to Customize the Look & Feel
Apply your corporate identity with
custom CSS
(XCC Documentation: "Include Custom CSS and Images",
"Create Custom CSS")
Style widget titles with HTML tags
(XCC Documentation"Configure Image for Widget Title")
http://www.slideshare.net/timetoact/
xcc-120-documentation

29. 29
Next Steps

30. 3030
Further Options to Extend Your First Landing Page
Personalize widget content for individual members or groups
(XCC Documentation: " XCC-Personalization")
Add a Navigation to XCC
(XCC Documentation: "Integration of the Navigation")
http://www.slideshare.net/timetoact/xcc-120-documentation