Adding Notes using Basic HTML and CSS in Your Script

Adding notes for CSRs requires the use of basic HTML and CSS coding. For example, if you want the Greeting step to look like this:

You’ll need the following coding:

  • Line Break = <br>
  • Red Text = <span style='color:red'>TEXT HERE</span>
  • Green Text = <span style='color:green'> TEXT HERE </span>
  • Navy Text = <span style='color:navy'> TEXT HERE </span>
  • Note that you can substitute different colors such as magenta, orange, blue, aqua, purple, maroon, brown, and more. We recommend colors that will stand out in the script and be easy to read.

Written out, it would look like this:

Hello, and thank you for calling, my name is {{Session.AgentName}}. How may I help you today?<br><br><span style='color:red'>CSR: Callers may ask for Jane Smith. Refer to FAQs for a response.</span><br><br><span style='color:navy'>Business Name: </span><span style='color:green'>Homes R Us</span><br><span style='color:navy'>Industry: </span><span  style='color:green'>Real Estate</span> <br><span style='color:navy'>Service Type: </span><span style='color:green'>Answering Service</span><br>

You can also change the style using:

  • Bold = <b>TEXT HERE</b>
  • Italics = <i>TEXT HERE</i>
  • Underline = <u>TEXT HERE</u>

Coding for the Regarding Step

Thank you, {{FirstName}}. What message would you like me to pass on?<br><span style='color:red'>(CSR: Please <span style='color:navy'>PAUSE</span> and wait for a response before continuing.)</span><br>I just need a few seconds to notate the call.

Coding for Simple Web Pop Integration Instructions

One moment please.<br><br><span style='color:green'>INSTRUCTIONS:</span><br><br><span style='color:navy'><span style='color:red'>1.</span> Click the <span style='color:green'>URL</span> below.<br><br><span style='color:red'>2.</span> Click the green <span style='color:green'>SEND</span> button to submit.<br><br><span style='color:red'>3.</span> When you`ve finished, an alert will pop-up and text will be automatically copied to your clipboard. <span style='color:red'>(You will be pasting this text back in the script.)</span><br><br><span style='color:red'>4.</span> Close popup window and select <span style='color:green'>Sent Email</span>.

Coding for Pop-Up Notes Text

<span style='color:red'>(NOTE: Press CTRL+V to paste the text from the pop-up alert into your notes.)</span>

Coding for Warm Transfer Web Pop Notes

<span style='color:red'>(CSR: Document the call result by pressing CTRL+V.)</span>

<span style='color:red'>(CSR: Please document the error message you received.)</span>

Coding for Warm Transfer Web Pop Instructions

One moment please while I will transfer you. May I place you on a brief hold? <br><br><span style='color:navy'><span style='color:red'>***Place the caller on hold, and follow the instructions below to transfer.***</span><br><br><span style='color:red'>1.</span> Copy the transfer number and enter it into the Dial box.<br><span style='color:red'>2.</span> Click the <span style='color:green'>Warm Transfer</span> button. <br><span style='color:red'>3.</span> If the call is Answered, select Answered below to provide the caller’s information. <br><span style='color:red'> 4.</span> If there is No Answer, please leave the following voicemail: <span style='color:green'> Hello, this is SAS with a call for you from: {{FirstName}} {{LastName}}. Their number is: {{PhoneNumber}}. Thank you.</span><br><br><span style='color:red'>_______________________________________________</span><br><br><span style='color:red'>5.</span> Go back to the link. If there is another number to dial, <span style='color:green'> repeat steps 3 - 6.</span><br><span style='color:red'>6.</span> If there are no more numbers, select No Answer to complete the call.</span>

Coding for Google Calendar Instructions

Okay, {{FirstName}}. May I put you on a brief hold while I access our calendar? <span style='color:navy'><br><br><span style='color:red'>1.</span> Click on the day of the week that the caller requested. <br><br><span style='color:red'>• NOTE:</span> If using the Monthly calendar in the upper left corner: Click on any date shown in <span style='color:navy'>BLUE</span>, and then you will see that day`s availability.<br><br><span style='color:red'>2.</span> Under the day the caller requested, click on the time that the caller selected.<br><br><span style='color:red'>• NOTE:</span> Available Appointments will be <span style='color:green'>GREEN</span><br><br><span style='color:red'>3.</span> IF APPLICABLE, from the drop down, select the Service (or Services) that the caller requested, and click <span style='color:red'>ADD APPOINTMENT.</span><br><br><span style='color:red'>4.</span> A Box will come up pre-filled with all caller data. Please confirm:<br><br><span style='color:green'>• {{FirstName}} {{LastName}}<br>• {{PhoneNumber}}<br><br><span style='color:red'>5.</span> To save the appointment, click on <span style='color:red'>ADD APPOINTMENT</span><br><br><span style='color:red'>• NOTE:</span> The appointment date and time have been automatically copied to your clipboard. You will paste that into the next step.</span>

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us