Blogger Integration Guide

This guide shows you how to add Heyo to your Blogger blog.

Installation

Step 1: Access Layout Settings

1. Log in to your Blogger dashboard
2. Go to Layout in the left sidebar
3. Click Add a Gadget in your sidebar or footer area

Step 2: Add HTML/JavaScript Gadget

1. From the gadget list, select HTML/JavaScript
2. Give it a title like "Chat Widget" (optional - you can leave it blank)
3. Paste this code in the content box:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

4. Click Save

Step 3: Position the Gadget

The chat widget will work regardless of where you place the gadget, but for best practice:

• Place it in the sidebar or footer
• You can hide the gadget title to make it invisible

Click Save arrangement and the chat will appear on your blog!

Alternative: Template HTML Method

For more advanced users:

1. Go to Theme in the Blogger dashboard
2. Click the dropdown next to Customize
3. Select Edit HTML
4. Find the </head> tag
5. Add this code just before </head>:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

6. Click Save theme

Show Chat on Specific Pages

Using template conditions:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

<b:if cond='data:view.isPost'>
  <!-- Chat will show on blog posts -->
</b:if>

<b:if cond='data:view.isPage'>
  <style>
    /* Hide chat on static pages */
    #heyo-widget-button {
      display: none !important;
    }
  </style>
</b:if>

Use Cases

Reader Engagement

Connect with readers who have questions about your blog posts:

• Answer questions about tutorials
• Clarify points in your articles
• Get feedback on content

Affiliate Support

Help readers with affiliate product questions:

• Recommend the right products
• Answer pre-purchase questions
• Build trust before they buy

Monetization

Convert readers into clients:

• Offer coaching or consulting
• Discuss sponsored content opportunities
• Book speaking engagements

Advanced Usage

Match Your Blog Theme

1. Go to Heyo dashboard > Project Settings > Appearance
2. Choose colors that match your Blogger theme
3. Select positioning (usually bottom-right works best)

Custom CSS Styling

Add to your HTML/JavaScript gadget or template:

<style>
  #heyo-widget-button {
    bottom: 20px !important;
    right: 20px !important;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    #heyo-widget-button {
      bottom: 80px !important;
    }
  }
</style>

Hide on Specific Posts

If you want to hide chat on certain posts, add this custom CSS using Blogger's post editor:

<style>
  #heyo-widget-button {
    display: none !important;
  }
</style>

Best Practices

• Use the HTML/JavaScript gadget for simplest setup
• Consider template HTML editing for more control
• Match widget colors to your blog theme
• Test on mobile (most blog traffic is mobile)
• Make yourself available during peak traffic hours
• Create quick replies for common reader questions

Troubleshooting

Chat widget not appearing

• Verify Project ID is correct
• Check that gadget is saved and visible
• Clear browser cache and reload blog
• Ensure JavaScript is enabled

Widget appearing in wrong position

• The gadget location doesn't affect chat button position
• Chat button uses fixed positioning
• Adjust position in Heyo dashboard settings

Conflicts with other gadgets

• Heyo shouldn't conflict with other gadgets
• If issues occur, try the template HTML method
• Check browser console for JavaScript errors

Template editing not working

• Make sure you clicked "Save theme"
• Verify you added code before </head>
• Check for HTML errors in template

Blogger Features Compatibility

Heyo works alongside:

• Google AdSense
• Blogger comments
• Social sharing widgets
• Analytics tracking
• Custom domains
• All Blogger gadgets

Dynamic Views

If using Blogger's Dynamic Views templates:

• HTML/JavaScript gadgets may not work in all views
• Use the template HTML method instead
• Or switch to a standard Blogger template

Mobile Template

For mobile-specific styling:

<b:if cond='data:blog.isMobile'>
<style>
  #heyo-widget-button {
    bottom: 80px !important;
  }
</style>
</b:if>

Next Steps

• Customize widget appearance
• Set up integrations
• Create quick replies for common questions