Adding branded logos to live chat windows

If you're managing multiple brands in Kayako, it's important that the proper logos appear in your customer chat windows. Since each brand and support site is managed by a different template group, you can personalize the logo for each of your support sites modifying that brand's templates. 

To accomplish this, you'll need to do a couple of things: 

• Make sure the logo files you want to use are uploaded somewhere easy to link to. It will need to be a public URL, for Kayako to be able to use it. 
• Figure out which brands you want to modify, so you know which template groups to start with. 
• Follow the instructions to below to update your chat templates.

Branding your live chat logos 

To customize your live chat logo to match your brand: 

1. Login to the admin control panel.
2. Click Templates on the sidebar and then Groups on the sidebar. 
3. Open the template group which you want to edit, then click on Templates. 
4. Here you'll see a list of template categories. Click on Live Support to expand the list. 
5. Finally, find the 'chatheader' template and click to open it.
6. Now you want to find the spot in the code that specifies which logo to you. You can type ctrl+F to search the page and type in:
   

    <{$_headerImageSC}>

7. That should take you down to the top of the body section:
   
8. Select the the entire '<{$_headerImageSC}>' tag and delete it. 
9. Copy the full URL for your logo image and paste it between the quotation marks after 'src=', where the header image code used to be.
   NOTE: Remember that the icon image, sized no larger 150px by 40px, needs to be hosted at a publicly available URL. 
10. When you've made your changes, that line of code should look something like this:
    

    <div id="topbanner"><div class="topbannerchat"> <img src="https://support.yourcompany.com/brandedlogo.png" alt="Kayako <{$_productTitle}> Logo" id="logo" />

11. After making the change, click the Save button.
12. Repeat the steps above for the template groups of any additional brands you support. 
13. Finally, go ahead and refresh one of your branded support sites, open up a chat, and you should see your updated logo.