How to add Live Agent to SAP® CPQ

How to add Live Agent to SAP® CPQ

No comment Share

Author: Sara Jagodzinski

Author: Sara Jagonzinski

Salesforce Live Agent is a native Salesforce tool that provides the ability to communicate in real-time with users in the web site. This how to is an explanation for Classic Salesforce and not Lightning. Salesforce Live Agent is a comprehensive chat solution that makes it easy for agents and support supervisors to assist customers. With Live Agent, users can leverage the comprehensive customer service tools that are available in the Salesforce console while providing real-time chat support.


Read this short process that breaks down how to add Live Agent to SAP® CPQ.

Ask a Consultant

In SFDC:

Static Resources: Setup -> Build -> Develop -> Static Resources

  • You will need to add Online and Offline images to Static Resources

Note: We need to include images for both offline and online for the link to Live Agent to work.

Site: Setup -> Build -> Develop -> Sites 

Note: If you are implementing the Live Agent into CPQ, you should already have a Salesforce Site created.  You can use that site setup.

Deployment: Setup -> Build -> Customize -> Live Agent -> Deployments

  1. Click New
    1. If you already have a chat button created, you can use it as a template to fill out your new deployment
  2. Fill out the Live Chat Deployment Name
  3. Fill out the Chat Window Title 
CPQ Deployment: 

 Screenshot (99)

Chat Button: Setup -> Build -> Customize -> Live Agent -> Chat Buttons & Invitations

  1. Click New
  2. Type: Chat Button
    1. If you already have a chat button created, you can use it as a template to fill out your new button
  3. Set the Name of the Button (i.e. CPQ Chat)
  4. Fill out any of the other information
  5. Routing Information
    1. Add the Skills necessary in Available Skills
    2. Choose Routing Type
    3. Skills should already be created
  6. Chat Button Customization
    1. Site for Resources: Choose the Site the customer has created
    2. Online Image: Choose the Online Image you uploaded in Static Resources
    3. Offline Image: Choose the Offline Image you uploaded in Static Resources
  7. Click Save

Screenshot (101)

You will need the code produced in both the Chat button and Deployment you created to add to the responsive templates in CPQ.  The Deployment code includes reference to the deployment created in SFDC and the link to be able to chat with agents. The Chat Button code includes the reference of the images for both Online and Offline.  

 

CHAT BUTTON CODE (EXAMPLE):

<img id="liveagent_button_online_573370000008Si3" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('573370000008Si3')" src="https://companyname.force.com/resource/1498146335000/CPQ_Online" /><img id="liveagent_button_offline_573370000008Si3" style="display: none; border: 0px none; " src="https://companyname.force.com/resource/1498146357000/CPQ_Offline" />

<script type="text/javascript">

if (!window._laq) { window._laq = []; }

window._laq.push(function(){liveagent.showWhenOnline('573370000008Si3', document.getElementById('liveagent_button_online_573370000008Si3'));

liveagent.showWhenOffline('573370000008Si3', document.getElementById('liveagent_button_offline_573370000008Si3'));

});</script>


DEPLOYMENT CODE (EXAMPLE):

<script type='text/javascript' src='https://c.la4-c2-chi.salesforceliveagent.com/content/g/js/40.0/deployment.js'></script>

<script type='text/javascript'>

liveagent.init('https://d.la4-c2-chi.salesforceliveagent.com/chat', '572370000008SLG', '00D37000000I8Z5');

</script>

 

In SAP CPQ:

For this example deployment, we added the above code to the MainMenu responsive template to have the link show up next to Setup. You can utilize other templates within the CPQ environment to implement Live Agent other than Menu template, due to the upgrades to the system.

CPQ Environment -> Setup -> UI Design ->  Responsive Template

To get to the MainMenu template, you need to do the following:

  1. Page: Shared
  2. Template: MainMenu
  3. Name: (Fill out)
  4. Click Default

If you are wanting an example of the code before and after the deployment, please request a free consultation and note that you would like to see our example code. Visit https://www.youtube.com/watch?v=rI-yc4SDMkA for further information about the Live Agent and Live Agent Console inside Salesforce.


 

We want to help you get the most out of your SAP CPQ solution. Do you want more thought leadership surrounding SAP CPQ? Follow our blog to learn more and or reach out for your free consultation! 

Ask a Consultant


Want to receive more thought leadership? Opt-In to our newsletter below!