Skip to content
English
Submit a Ticket
  • There are no suggestions because the search field is empty.

How to Style Your Connect Panel

Customize the Look & Feel of Your Connect Panel to Match Your Church’s Branding

 

The Style Your Panel settings allow you to customize the colors, position, animations, and logo of your Connect panel, ensuring that it aligns seamlessly with your church’s branding.

1. Accessing the Style Your Panel Settings

Step 1: Open the Settings Panel

  1. Log in to your Connect Dashboard.
  2. Navigate to Settings → Panel Settings → Style Your Panel.

💡 Tip: Styling your Connect panel to match your website enhances brand consistency and makes it feel like an integrated part of your site.

2. Setting Panel Visibility & Behavior

Step 2: Adjust When & Where the Panel Appears

✅ Display Options:

  • Everywhere (default – recommended)
  • Only on Desktop
  • Only on Mobile
  • Hidden (useful for temporarily disabling the panel without removing it completely)

✅ Panel Loading Options:

  • Immediately (recommended for maximum engagement)
  • After Scrolling (only appears once a visitor scrolls down the page—good for less intrusive experiences)

✅ Panel Positioning:

  • Left or Right (choose which side of the screen the Connect panel appears on.)
  • Default: Right (most commonly used for chat-based tools.)

✅ Footer Branding:

  • Option to display "Powered by Birdseed" in the footer.

💡 Tip: If your panel includes live chat or call requests, keep the panel always visible and set it to load immediately for faster visitor engagement.

3. Customizing Panel Appearance & Colors

Step 3: Adjust Colors to Match Your Brand

  1. Navigate to the Color Settings section.
  2. Click the Primary Color box and choose a color:
    ✅ Select a preset color OR
    ✅ Enter a hex code to match your church’s exact branding.
  3. Click the Link Color box and choose the color for links inside the panel.

🎨 Recommended:

  • Match your primary color to your church’s brand identity.
  • Keep link colors contrasting enough to remain readable.
  • Use gradients for a modern, visually appealing look.

💡 Tip: If you’re unsure of your exact brand colors, check your website’s style guide or ask your web designer for the hex codes.

4. Adding Your Church Logo

Step 4: Upload a Logo

  1. Scroll to Panel Logo.
  2. Click Add Logo.
  3. Upload an image file (recommended: PNG with a transparent background).
  4. Save changes.

✅ Best Practice: Your logo should be clear and recognizable in a small format.

5. Customizing the Connect Button

Step 5: Change the Widget Button

The Connect button is the main icon visitors click to open the panel.

Options:
✅ Use Default Button (pre-designed by Connect)
✅ Change the Icon (select from available icons)
✅ Upload a Custom Button (for full branding control)

💡 Tip: If you choose Custom Button, upload a PNG file with a transparent background for best results.

6. Adding Intro Animations & Call-to-Action Text

Step 6: Enable Attention-Grabbing Animations

To increase engagement, you can apply subtle animations to the Connect button:
✅ None (default – no movement)
✅ Pulse (soft pulsing effect – recommended to catch attention)
✅ Bounce (bounces slightly to encourage clicks)
✅ Heartbeat (gives a smooth "heartbeat" effect for emphasis)

Step 7: Customize the Intro Text

  • This text appears above the Connect panel before a visitor clicks it.
  • Default: "Welcome to our website! Choose an option to connect with us."
  • Customize it to match your church’s messaging.
    ✅ Example: "We’d love to connect with you! How can we help?"

💡 Tip: Keep it warm, inviting, and action-oriented to encourage interaction.

7. Embedding the Connect Panel Manually

Step 8: Using the Direct Link Option

If you want to trigger the Connect panel from a button on your website, use the Activation Code:

  1. Scroll to Activation Code.
  2. Copy the code snippet.
  3. Paste it into your website’s HTML or CMS where you want the button to trigger Connect.

8. Adjusting Phone Number Display & Formatting

Step 9: Set Phone Number Formatting

  • Ensure that Connect recognizes phone numbers properly for calling features.
  • Select your country code for correct formatting.

💡 Tip: If your church serves multiple regions, make sure the correct country format is pre-selected so visitors don’t have to manually change it.

9. Save Your Changes & Test

Step 10: Save & Preview

  1. Click Save to apply changes.
  2. Open your website and test:
    ✅ Does the Connect button match your site’s branding?
    ✅ Is the panel positioned correctly (left/right)?
    ✅ Do animations and intro text display as expected?

10. Best Practices for Styling Your Connect Panel

✅ Keep Branding Consistent – Match colors, fonts, and logos to your website.
✅ Use Subtle Animations – A soft pulse or bounce can increase engagement.
✅ Choose the Right Placement – The right side is the most common.
✅ Enable Immediate Loading – Engage visitors as soon as they arrive.
✅ Add an Engaging Intro Message – Keep the text friendly and action-driven.

🎯 Next Steps

Your Connect panel is now fully customized and branded for your church! 🎉 If you have any questions, reach out to support@ministrydesigns.org for help. 🚀