Overview

Skill Level: Any

Time required: 30mins

This hands-on tutorial guides you through building your first content types and adding content and assets in the new IBM Watson Content Hub. The Watson Content Hub gives business owners the power to create iconic, robust, and consistent brand experiences with cloud-based, cognitive content management capabilities. Marketing and merchandising professionals can quickly select content to create relevant offers that are delivered across multiple channels. Content can be delivered to channels such as mobile, web-based solutions or email, including channels delivered by IBM Marketing Cloud, IBM Commerce on Cloud, and IBM Digital Experience.
The key capabilities of IBM Watson Content Hub are:
– Quick and Easy – Create fast and customer-friendly digital experiences with rich content and asset capabilities that do not overburden IT.
– Cognitive Content – Combine smart, adaptive content to deliver an attractive customer experience.
– Global Reach with Cloud – Reach the world with cloud-based content authoring and distribution for consistent brand experience across multiple channels.

For a similar hands on tutorial that is frequently updated with the latest Watson Content Hub features, refer to Lab Get your hands on IBM Watson Content Hub in the resources section at the end of this tutorial.

Prerequisites

Instead of using this initial tutorial, you should download and run the most up-to-date one, available here: Get your hands-on IBM Watson Content Hub Tutorial РNovember 2018 Edition 

with corresponding updated resources.

 

To get started, you need

  • Your own IBM Watson Content Hub tenant with your own IBMid. To get a free trial of IBM Watson Content Hub,
    • Go to IBM Marketplace and click Free trial.
    • From the different offerings, click Try Free.
    • Sign up for an IBMid or if you already have an IBMid sign in and confirm to use the trial.
  • Download corresponding resources Link to corresponding file resources. You can replace with your own resources.
  • Optionnaly, a demo environment with IBM Digital Experience V9 and IBM Watson Content Hub for integration. The IBM Digital Experience image runs on the Cloud (Softlayer), and gives you direct access to the IBM WebSphere Portal, IBM Web Content Manager and IBM Forms Experience Builder capabilities, and consumes Watson Content Hub and other shared cloud-based services (Commerce, Enterprise Marketing Management (EMM), Interact, Connections, Kenexa, Business Process Manager (BPM), Cognos, Mobile Push Notification (Xtify), BPM, etc.). See the IBM Digital Experience business user lab to get started.
  • Instead of using this initial tutorial, you may download and run the most up-to-date one, available here:¬†Get your hands-on IBM Watson Content Hub Tutorial – November 2018 Edition with corresponding updated resources)
  • You need the following user IDs and passwords throughout lab.
    Purpose User Password
    Content manager and creator Your IBMid user Your IBMid password
    Marketing Manager fadams passw0rd

 

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Explore IBM Watson Content Hub

    In this first step, connect and learn the basics on IBM Watson Content Hub.

    1. Open the email that you received after you finished the trial request. The email contains these three links to get started: Launch Service | Get Support | Learn About
    2. Click Launch Service. The following URL: https://www.digitalexperience.ibm.com/#/Home opens. A tour guides you around and helps you get started.
    3. Read the text and click > to continue to learn the basics in this dashboard.                                                                                                          
    4. Click Got it ‚Äď or replay if needed at the end of the guided tour.

     

    The last tour bubble opens the Help link that brings you to a complete and clear help guide. You can also search and redo the home page tour that you completed.

  2. Add your first assets

    Now add your first asset. As you are going to make a promotion, you can use the helper file Desktop/Lab Files/WCH/Getting started/flat-white-coffee.jpg or pick any other image that you might want to reuse from your existing site. You can also use images from Google, or free images sites, like http://morguefile.com.

    1. There are different ways to add this image directly to Watson Content Hub(WCH). On the home page, you can drag one or multiple images files and drop in the Drop digital assets zone. Or click Upload assets to select your files. In this example, you would drop the provided flat-white-coffee.jpg. A thumbnail of your image is shown and then tags for the image are generated by Watson auto tag.                                                                       
    2. Edit the tags by adding a cappuccino and cappuccino art tags and removing the caffe latte tag. The Watson auto tagging continues to learn from your edits. Then, click Done.                                                        
    3. You can upload other assets like files and videos from the user interface.

    Note: Watson Content Hub allows developers to add a different contribution interface to match your business user’s needs.

    You successfully created your first asset and are reaady to build your promotion.

  3. Build a target audience taxonomy

    In this step, prepare a taxonomy of your target audience for your promotions. Then, add the categories Internal, Press, Public, and Dealer to the taxonomy you prepared. Having the taxonomy and the categories allows your sites and applications to select the right promotions automatically.

    1. Select the primary navigation menu, expand the Content model, and then select Taxonomies.
    2. Click Create taxonomy.                                                                                                                                                                                       
    3. Enter the Taxonomy name Target Audience. Then, change the name of the first category Category 1 to Internal. You can continue to add hierarchy levels. For this tutorial, you will use only one level.                                                                                                                              
    4. Click Add parent category.                                                                                                                       
    5. Repeat the steps for adding the categories Public, Press, and Dealer. Note: The categories are sorted and saved automatically for you. If you have different levels, you can move them around by dragging & dropping.              

    You successfully created your target audience taxonomy.

  4. Build a promotion image profile

    The next step is to build a promotion Image Profile that automatically creates renditions for you. These renditions can be used to optimize performance for these images on different devices, like desktop, tablet and mobile. Create a wide banner (1000×200) and a square for mobile (400×400) renditions and use these renditions for your promotions in this tutorial. Later you can use it for other content types.

    1. Select the primary navigation menu, expand the Content model, and then click Image Profiles.
    2. Click Create image profile.                                                                                                                           
    3. Change the image profile to Promotion and add your first rendition, which is for a wide banner. Enter Wide Banner in the label. A key is generated automatically. This key is used to select the right renditions. Then, enter the width 1000 and height 200. You can optionally provide a description. Then, click Add rendition.                                                                                                                                                                                                                                                                                                                                                     
    4. Add a smaller square rendition for mobile. Label it Square for Mobile, enter width and height 400, optionally add a description and click Add rendition.                                                                                                                                                                                                             

    You successfully created a new promotion image profile.

  5. Build a promotion content type

    Use the taxonomy and image profile to build a specific promotion content type. Create a promotion with a title, description, code, image, video, and target audience category.

    1. In the primary navigation menu, select Content types under the Content model. 
    2. Click Create content type.                                                                                                                        
    3. Change the title to Promotion. The content always has a title and description therefore click Text in the Palette to add the element.                                                                                                                                    
    4. By default, the content type has a title. Hence, you need to add a description element to the content type. On the Text element dialog, enter Code as label. Optionally define the minimum and maximum number of characters, 10 in this case for both, and check Element is required.                                                                           
    5. Click Custom display tab. Here you can specify how the text element must look like. For this tutorial, keep the Display as Single line and give a field width of 10 characters.                                                                   
    6. Click Custom help tab. Here you can provide help to support the contributors to complete the element. For example, you can put a help text like Request the code from marketing. If you did not receive the code, enter 0000000000. Then, click Apply.                                                                                                                     
    7. Click Image in the Palette to add an image element to illustrate your promotion.                                         
    8. On the Image element dialog, label it Image. You can specify the allowed image file types.                                  
    9. Click Image profiles tab. Select the Promotion image profile.                                                                          
    10. You can see the different renditions that are applied to images used for promotions. Then, click Apply.         
    11. Now add a Video element from the Palette.                                                                                                                                                                                                                          
    12. Label it Video and click Apply.                                                                                                                      
    13. Finally, add a Category element to select the target audience for the promotion. Click Category.                                                                                
    14. On the Category element dialog, label it Target Audience.                                                                           
    15. Click Custom display tab and select the Target Audience taxonomy and click Apply.                                                           

    You are ready now and can test it. You can also get access to API information that gives you access to the Item ID, authoring URL and view the JSON. If you want, you can try adding other elements as well, reorder the elements by dragging & dropping and re editing them. In the next step, you will test it with a real promotion.

    You now successfully created a new Promotion content type.

  6. Create your first promotion

    Create your first promotion with the new Promotion type you created.

    1. Using the navigation menu, click Content and then My content and assets. You can also create it from the home page.                                                                                                                                                  
    2. Click Compose and then Promotion.                                                                                                           
    3. Give your promotion a title, for example, Cappuccino art. Note: You can add tags and a description as well. Then, fill out a code. Note: It must be 10 characters and you have help guidance.  
    4. Then, add an image. It can be uploaded and added to the assets directly, like you did in the previous step. For this tutorial, select your existing one. Click Find. The content picker opens, which you can integrate in external applications as well in several solutions that are embedded out of the box, like IBM WebSphere Commerce and IBM Digital Experience. The content picker helps you easily find any asset thanks to search options like full text search and filter.                                                                                                                         
    5. Click Filter and refine your search by date created and modified, creator, and tags. If you hover your mouse over the image, you see options view information on the image, preview it, add it to your clipboard. If you need to add in other contents, and tags, you can add it to the clip board.                               
    6. Click Tag. Here you can see a tag list, which helps you to find exactly the right asset. Click the flag \u0001 to select this asset.
    7. All renditions are created automatically for you. However, if you want to directly edit them hover over the original image.You can find options to find and upload another image to replace, change image settings (to set an alternative text) and an option to edit. Click the edit option.                                                        
    8. Select what part of the original image must be used for each rendition. Scale the image and click Apply.                                                                                                                      
    9. See your results. Then, you can add a video as well and select a Target Audience. After the content is ready, publish it by clicking Ready.                                                                                                             

    Your content is now ready to be used in your site, mobile, and other applications. The IBM Watson Content Hub Developer Center gives you access to blogs, samples, documentation, forum, events, and support needed to get a fast start. Also, have a look at these samples: http://samples.watsoncontenthub.io/sample-pages/.

    You successfully created a new promotion content.

     

  7. Use the promotion content in an external application

    Use the promotion content created in IBM Watson Content Hub in external applications. In this tutorial, you will use it in IBM Digital Experience, which has an out of the box integration, like other IBM software. If you want to integrate it in other applications, go to IBM Watson Content Hub Developer Center for details and examples.

    1. Connect to the test server: https://dx.ibmcollabcloud.com. You can use the test server to trial IBM Digital Experience for specific industries. A dedicated IBM Digital Experience business user lab is available for more information. Connect to the test server first to author.  Click Log in to use authoring capabilities.
    2.  Log in with user fadams and password passw0rd.                                                                                                                                                                             
    3. Add pages. Click Test WCH.                                                                                                                                                                       
    4. Switch to Edit Mode and then select the Add page components and applications.                                          
    5. Select Page Components and select the Content Hub category.                                                                         
    6. Select any of the asset types to insert it in the page. In this case, select Image.                                                                                                        
    7. A new page component, which is ready to be configured is added.                                                                           
    8. You have the same user interface as in IBM Watson Content Hub, which helps you to find the right asset easily. This server is configured to run with a shared read-only tenant. Normally you configure it to your own tenant.
    9. You can hover over it to change the presentation, by using different presentation components. However, currently there are only three out of the box presentation components. These presentation components can be changed and extended by using the REST APIs. For more information, see the documentation from the IBM Watson Content Hub Developer Center. You can, for example put these samples into Script Applications: http://samples.watsoncontenthub.io/sample-pages/.
    10. After you have complete testing, delete your added page component.                                                                       

    You successfully used IBM Watson Content Hub in an external application.

Expected outcome

Instead of using this initial tutorial, you should download and run the most up-to-date one, available here: Get your hands-on IBM Watson Content Hub Tutorial РNovember 2018 Edition with corresponding updated resources.

 

Created your first promotion, using your own new content type with the image renditions for wide banners and square for mobile

 Content

And used this image in an external application, in this case IBM Digital Experience.

Integration of IBM Watson Content Hub in IBM Digital Experience

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

3 comments on"Complete hands on tutorial on creating and delivering content in IBM Watson Content Hub"

  1. Rodrigo Oliveira June 01, 2017

    Very well done Herbert!!!

  2. Thanks Herbert for the quality of this tuto!

Join The Discussion

Your email address will not be published. Required fields are marked *