Add Branding and Components to the Site

The Category 1 Biking site is in great shape. In this step, add custom branding, update components, and put the finishing touches on the site. Begin by adding branding to the site, and updating the navigation menu. 

Update the Headline

1. Click the selector and select Builder.
   
2. Click the Headline component.
   
   
3. Update the headline as follows.
   

• Title: Category 1 Biking
• Banner Text: Welcome to the community!

4. Click X to close the Headline editor.
   

Update the Theme

Next, use the theme menu to select colors and images for the site. Download this zip file to access images you can use for this project. Be sure to unzip the file.

1. Select the Theme icon.
   
   
2. Click Colors to expand the menu.
   
3. Adjust the colors as you see fit.
   
4. Click the left-facing arrow next to Colors to contract the menu.
   
5. Click Images to expand the menu.
   
6. Click Upload Image icon under Header Image.
   
7. Click Upload Image and choose header.jpg from the folder you downloaded earlier.
   
8. Click X to close the Theme editor.
   

Update the Navigation Menu

1. Click the gray bar across the top to reveal the Navigation Menu component.
   
   
2. Click Edit Default Navigation from the menu on the right.
   
3. Click + Add Menu Item.
   
4. Enter these details.
   

• Update the Name to Cases
• Type: Salesforce Object
  
• Object Type: Case
  
• Default List View: My Open Cases
  

5. Click Save Menu.
   
6. Click X to close the Navigation Menu.
   

Add the Chat Snap-In and Article Components

1. Select the Components icon.
   
   
2. Enter Embedded Service Chat in the components search bar.
   
3. Select Embedded Service Chat and drag it to the right sidebar, beneath the Ask a Question component.
   
4. The Can’t Access Resources pop-up window will appear. You’ll adjust the Content Security Policy later. Click OK.
   Note: Don't see the pop-up? Check your browser. If you're using Mozilla Firefox, try switching to Google Chrome.
   
5. Click X to close the Embedded Service Chat dialogue box.
   
6. Click the Components icon to re-open the menu.
   
7. Enter Trending Articles by Topic in the components search bar.
   
8. Select Trending Articles by Topic, and drag it to the sidebar beneath the Embedded Service Chat component.
   
   
9. Click X to close the Trending Articles by Topic editor.
   

Adjust the Content Security Policy

Content Security Policy (CSP) is a web standard that defines rules to control the source of content that can be loaded on a page. All CSP rules work at the page level, and apply to all components and libraries. Adjust the CSP to allow Chat Agent to run on this site.

1. Select the Settings icon.
   

2. Select Security & Privacy.
   
3. Click the Strict CSP drop-down and select Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts.
   
4. Click Allow.
   
5. The Can’t Access Resources pop-up window will appear again. Copy the https through .com portion of the URL listed. You’ll be adding this URL to your Trusted Sites for Scripts. 
   
6. After copying the URL, click OK.
   
7. Click +Add Trusted Site.
   
8. Paste the URL you just copied to the URL textbox.
   
9. Enter Chat in the Name textbox.
   
10. Ensure Active is checked.
    
11. Click Add Site.
    
12. Click the X to close the Settings window.
    

Publish Your Site

1. Click Publish.
   
2. On the Publish Your Site confirmation screen, click Publish, then Got It.
   

You receive an email confirmation once your site is published. Click the link in your email to see your site live!