> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Utilizing CC & BCC in emails

> Learn how to use Carbon Copy (CC) and Blind Carbon Copy (BCC) when sending emails from Conversations for collaboration and confidentiality.

export const CourseTracker = ({courseId, lessonId, videoId}) => {
  const [progress, setProgress] = useState({});
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    setProgress(loadProgress());
    document.body.setAttribute("data-academy", "true");
    return () => document.body.removeAttribute("data-academy");
  }, []);
  const course = COURSES[courseId];
  if (!course) return null;
  const lessons = course.lessons;
  const currentIndex = lessons.findIndex(l => l.id === lessonId);
  const completedCount = lessons.filter(l => !!progress[courseId + "/" + l.id]).length;
  const percent = lessons.length > 0 ? Math.round(completedCount / lessons.length * 100) : 0;
  const isCurrentDone = !!progress[courseId + "/" + lessonId];
  const prev = currentIndex > 0 ? lessons[currentIndex - 1] : null;
  const next = currentIndex < lessons.length - 1 ? lessons[currentIndex + 1] : null;
  const totalDuration = formatTotalDuration(lessons);
  const handleToggle = () => {
    const key = courseId + "/" + lessonId;
    const updated = {
      ...progress
    };
    if (updated[key]) {
      delete updated[key];
    } else {
      updated[key] = Date.now();
    }
    setProgress(updated);
    persistProgress(updated);
  };
  const lessonPath = lesson => "/academy/" + course.dir + "/" + lesson.id;
  const videoEmbed = videoId ? <div style={{
    position: "relative",
    width: "100%",
    paddingBottom: "56.25%",
    borderRadius: "var(--ds-radius-lg)",
    overflow: "hidden",
    marginBottom: "24px",
    background: "#000"
  }}>
      <iframe src={"https://www.youtube-nocookie.com/embed/" + videoId + "?rel=0"} title="Lesson video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "none"
  }} />
    </div> : null;
  const lessonList = lessons.map(lesson => {
    const isActive = lesson.id === lessonId;
    const isDone = !!progress[courseId + "/" + lesson.id];
    const itemStyle = {
      display: "flex",
      alignItems: "center",
      gap: "8px",
      padding: "10px 16px",
      borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
      background: isActive ? "var(--academy-active-bg, #f9fafb)" : "transparent",
      textDecoration: "none",
      cursor: isActive ? "default" : "pointer",
      color: "inherit",
      transition: "background 0.15s"
    };
    const titleStyle = {
      flex: 1,
      fontSize: "13px",
      fontWeight: isActive ? 600 : 400,
      color: isActive ? "var(--academy-text, #111827)" : "var(--academy-text-secondary, #6b7280)",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      lineHeight: "1.4"
    };
    const durationStyle = {
      fontSize: "12px",
      color: "var(--academy-text-muted, #9ca3af)",
      whiteSpace: "nowrap"
    };
    const inner = <>
        {isDone ? <CheckCircle /> : <VideoIcon />}
        <span style={titleStyle}>{lesson.title}</span>
        <span style={durationStyle}>{lesson.duration}</span>
      </>;
    if (isActive) {
      return <div key={lesson.id} style={itemStyle}>
          {inner}
        </div>;
    }
    return <a key={lesson.id} href={lessonPath(lesson)} style={itemStyle}>
        {inner}
      </a>;
  });
  return <div className="not-prose" id="academy-course-tracker">
      {videoEmbed}
      <div className="academy-tracker" style={{
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    borderRadius: "var(--ds-radius-lg)",
    border: "1px solid var(--academy-border, #e5e7eb)",
    background: "var(--academy-bg, #ffffff)",
    overflow: "hidden",
    marginBottom: "24px"
  }}>
        {}
        <div style={{
    padding: "16px 16px 0"
  }}>
          <h3 style={{
    margin: 0,
    fontSize: "16px",
    fontWeight: 600,
    lineHeight: "1.4",
    color: "var(--academy-text, #111827)"
  }}>
            {course.title}
          </h3>
          <div style={{
    display: "flex",
    gap: "12px",
    marginTop: "8px"
  }}>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <BookIcon /> {lessons.length} lessons
            </span>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <ClockIcon /> Approx. {totalDuration}
            </span>
          </div>
        </div>

        {}
        <div style={{
    padding: "14px 16px 16px"
  }}>
          <div style={{
    display: "flex",
    justifyContent: "space-between",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)"
  }}>
            <span>Your progress</span>
            <span style={{
    fontWeight: 500,
    color: "var(--academy-text, #111827)"
  }}>
              {percent}%
            </span>
          </div>
          <div style={{
    height: "6px",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-track, #f3f4f6)",
    marginTop: "8px",
    overflow: "hidden"
  }}>
            <div style={{
    height: "100%",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-progress, #3b82f6)",
    transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    width: percent + "%"
  }} />
          </div>
        </div>

        {}
        <div className="academy-lessons-desktop">{lessonList}</div>

        {}
        <div className="academy-lessons-mobile">
          <button onClick={() => setExpanded(!expanded)} aria-expanded={expanded} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "12px 16px",
    cursor: "pointer",
    borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
    background: "transparent",
    border: "none",
    borderTopStyle: "solid",
    borderTopWidth: "1px",
    borderTopColor: "var(--academy-border-subtle, #f3f4f6)",
    width: "100%",
    textAlign: "left",
    color: "var(--academy-text-secondary, #6b7280)",
    fontSize: "13px",
    fontWeight: 500,
    fontFamily: "inherit"
  }}>
            <span>
              {expanded ? "Hide lessons" : "Show all " + lessons.length + " lessons"}
            </span>
            <ChevronDown open={expanded} />
          </button>
          {expanded && lessonList}
        </div>

        {}
        <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    borderTop: "1px solid var(--academy-border, #e5e7eb)",
    padding: "10px 16px"
  }}>
          {prev ? <a href={lessonPath(prev)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              ‹ Previous
            </a> : <div />}
          <button onClick={handleToggle} style={{
    fontSize: "13px",
    fontWeight: 500,
    cursor: "pointer",
    padding: "6px 14px",
    borderRadius: "var(--ds-radius-md)",
    border: isCurrentDone ? "1px solid var(--academy-border, #e5e7eb)" : "none",
    background: isCurrentDone ? "var(--academy-bg, #ffffff)" : "var(--academy-btn-bg, #111827)",
    color: isCurrentDone ? "var(--academy-complete, #10b981)" : "var(--academy-btn-text, #ffffff)",
    display: "flex",
    alignItems: "center",
    gap: "6px",
    transition: "all 0.2s",
    lineHeight: "1.4",
    fontFamily: "inherit"
  }}>
            {isCurrentDone ? <>
                <CheckCircle /> Completed
              </> : "Mark as completed"}
          </button>
          {next ? <a href={lessonPath(next)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              Next ›
            </a> : <div />}
        </div>
      </div>
    </div>;
};

<CourseTracker courseId="email-messaging" lessonId="utilizing-cc-bcc-in-emails" />

CC (Carbon Copy) and BCC (Blind Carbon Copy) give you greater flexibility and control when sending emails through the HoopAI Platform. Use CC to keep relevant parties informed and BCC to include recipients privately without revealing their identities to others.

<Frame caption="The Utilizing CC & BCC in Emails lesson in the HoopAI Academy">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-email-cc-bcc.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=8745ae04a64cea6b9408446867b607a0" alt="Utilizing CC and BCC in emails" width="1536" height="826" data-path="images/academy-email-cc-bcc.png" />
</Frame>

## Why this matters

When you send an email from a Conversation, the CC and BCC fields let you loop in additional recipients without sending a separate message. BCC is especially useful for managers who want visibility into client communications without being visible to the client. CC keeps collaborators in the loop transparently.

<Note>
  When using CC or BCC, custom fields (merge tags) only apply to the **primary recipient**. If you need personalized content for multiple recipients, use the **Bulk Email Send** feature instead so custom fields work correctly for each individual.
</Note>

## How to use CC and BCC in emails

<Steps>
  <Step title="Open a conversation and start an email">
    In the **Conversations** area, open or start a conversation with a contact. Select **Email** as the communication channel in the message composer.

    <Frame caption="Opening a conversation to compose an email with CC or BCC">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-quick-start-conversations.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=b35ece2a2ead2ac8c92820a62c044b70" alt="Conversations area" width="1536" height="826" data-path="images/academy-quick-start-conversations.png" />
    </Frame>
  </Step>

  <Step title="Locate the CC and BCC fields">
    In the email composer, look for the **CC** and **BCC** fields. They are accessible via a **CC/BCC** toggle or link near the **To** field. Click to expand them.

    <Frame caption="The CC and BCC fields in the email message composer">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-email-cc-bcc.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=8745ae04a64cea6b9408446867b607a0" alt="CC BCC email composer" width="1536" height="826" data-path="images/academy-email-cc-bcc.png" />
    </Frame>
  </Step>

  <Step title="Add CC recipients">
    Enter email addresses in the **CC** field for anyone who should receive a copy of the email and be visible to all recipients. CC recipients can see each other's addresses and will receive all replies if someone clicks "Reply All."
  </Step>

  <Step title="Add BCC recipients">
    Enter email addresses in the **BCC** field for recipients who should receive the email privately. BCC recipients are not visible to the primary recipient or CC recipients — their address stays confidential.

    <Tip>
      Use BCC when sending client emails that your manager or business partner needs to monitor without the client seeing their email address.
    </Tip>
  </Step>

  <Step title="Compose and send">
    Write your email as normal and click **Send**. All recipients — To, CC, and BCC — will receive the message.

    <Frame caption="Sending an email with CC and BCC recipients from the Conversations area">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-email-blast.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=dc2697390856b15ce7e4f80c20f922df" alt="Send email with CC BCC" width="1536" height="826" data-path="images/academy-email-blast.png" />
    </Frame>
  </Step>
</Steps>

## How replies work with CC and BCC

<AccordionGroup>
  <Accordion title="Replies from CC or BCC recipients">
    If a CC or BCC recipient replies to the email, their reply comes into the same conversation thread as the primary contact's replies in the platform.
  </Accordion>

  <Accordion title="Reply to all behavior">
    If a recipient uses "Reply All," the response goes to all visible recipients (To and CC). BCC recipients are not included in Reply All responses — their confidentiality is maintained.
  </Accordion>

  <Accordion title="Custom fields with CC and BCC">
    Custom fields (merge tags like `{{contact.first_name}}`) only populate for the primary recipient. For personalized campaigns to multiple recipients, use **Bulk Email Send** so each contact gets the correctly personalized version.
  </Accordion>

  <Accordion title="When to use BCC vs. bulk send">
    Use CC/BCC for individual conversational emails where you need to loop in a third party. Use Bulk Email Send when you want to reach many contacts with personalized messaging at scale.
  </Accordion>
</AccordionGroup>

## Key benefits

<AccordionGroup>
  <Accordion title="Recipient privacy">
    BCC protects the email addresses of private or sensitive recipients.
  </Accordion>

  <Accordion title="Efficient multi-recipient communication">
    Reach multiple people simultaneously without duplicating effort.
  </Accordion>

  <Accordion title="Transparency">
    CC keeps all stakeholders informed and creates a culture of open communication.
  </Accordion>

  <Accordion title="Flexible control">
    Choose exactly who receives each email and whether their inclusion is visible to others.
  </Accordion>
</AccordionGroup>
