Step-by-Step Guide: Uploading Custom Avatars to Your Web Chat

Introduction

Welcome to this step-by-step guide on customizing your web chat avatars! This feature was requested by the talented Marissa, and it allows you to upload unique avatar images for each web chat easily. Let’s get started!

Step 1: Access Your CBB Account

First, you’ll need to log into your CBB account. In this example, we will be using the Snoop Dog chat account.

Step 2: Install the Custom Avatar Template

1. Navigate to the templates section in your account.
2. Locate the Custom Avatar template.
3. Click on Install.
4. Choose the account (in this case, Snoop Dog chat) and select Install.

Step 3: Upload Your Image

1. Once installed, you will need to upload an image. Click on the tiny question mark icon to see information about Image Links.
2. Click on ADD to upload your image from your computer.
3. For this example, we will select an image of Ice Cube from the Downloads folder and click Open to upload it.

Step 4: Get the Image Link

1. After uploading the image, click on Get Link to acquire the link for your image.

Step 5: Configure Your Web Chat

1. Navigate to Web Chat Manage from the settings section.
   • If you haven’t set up any web chats before, go to Settings > Channels > Web Chats.
2. Select the newly created web chat from the installed template.
3. Set the name to Ice Cube and adjust the welcome message as needed.
4. Now, we can customize the web chat by selecting Customize Webchat with CSS.

Step 6: Replace the Image Link

1. Scroll down to find the CSS code section.
2. Look for the line that states to replace the link with your image link: background-image: url('your_image_link');.
3. Paste the copied image link in this section. Use Ctrl + V to paste.
4. You can also change the border color by replacing the color code where it says solid using a color picker to choose your preferred color.

Step 7: Save Changes and Preview

1. Click Save after making these changes.
2. To preview your customized web chat with the new avatar, grab the link to the chat avatar and open it in a new tab.
3. You should see the Ice Cube avatar along with your specified colors.

Step 8: Repeat for Different Avatars

Feel free to repeat these steps for different web chats using different images. For example, you can switch to a Snoop Dog avatar by simply changing the image link and metadata accordingly.

Conclusion

Now you can easily upload custom avatars to your web chat, personalizing your interactions. Special thanks to Marissa for the feature request that helped create this guide.

Thank you for following along, and best of luck with your web chat customizations!

Keywords

custom avatars, web chat, image upload, CSS customization, CBB account, image link

FAQ

1. How do I access the custom avatar feature?
You can access the custom avatar feature through your CBB account by installing the Custom Avatar template.

2. Can I use different images for different web chats?
Yes, you can upload different images for each web chat by repeating the steps for each one.

3. How do I change the border color?
You can change the border color by replacing the color code in the CSS customization section of your web chat settings.

4. What should I do if my uploaded image doesn’t appear?
Double-check that the image link has been correctly pasted in the customizable section and that you have saved your changes before previewing.

5. Who can I thank for this feature?
A big shout-out to Marissa for requesting the custom avatar uploading feature!