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

# Inviting Users to Events

> Send branded event invitations using either a custom email composer or a custom image, then preview and test before sending.

export const InternalNote = ({children}) => {
  const [isInternal, setIsInternal] = useState(false);
  useEffect(() => {
    const user = window.__mintlify_user__;
    if (user?.groups?.includes("internal")) setIsInternal(true);
  }, []);
  if (!isInternal) return null;
  return <div className="internal-note">
      <strong className="internal-note-title">🔒 Internal Note</strong>
      <div>{children}</div>
    </div>;
};

export const FeatureAvailability = ({module, feature}) => {
  const label = feature || module;
  return <Info title="Feature availability">
      {label ? <>This feature requires the <strong>{label}</strong> module. </> : <>This feature may not be enabled for your organization. </>}
      If you don't see it in Juno, contact your administrator.
    </Info>;
};

<FeatureAvailability module="Events" />

When you assign learners to an event, you can either let them pick their own session or assign sessions for them — and customize the invitation email they receive.

## Choosing how learners get sessions

In the **Assign Users** dialog, the **Event Sessions** step asks how each invitee should land on a session:

| Option                  | What it does                                                                                    |
| ----------------------- | ----------------------------------------------------------------------------------------------- |
| **Let learners choose** | Sends an invitation with a link to the event page where each invitee picks their own session.   |
| **Assign sessions**     | You select the sessions (and credit, if priced). Invitees are enrolled directly with no choice. |

The email customization options below only apply when you select **Let learners choose**.

***

## Choosing an email style

Pick one of two mutually exclusive invitation styles using the radio selector:

| Mode                       | When to use it                                                                                                                 |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Email**                  | Compose a branded, text-based invitation with subject, body, and a call-to-action button. Best for clear, accessible messages. |
| **Use custom email image** | Upload a single image (PNG/JPG) that becomes the entire email body. Best for highly designed, marketing-style invites.         |

Switching modes clears the other mode's content — only the active mode is sent.

***

## Composing the email (Email mode)

Email mode opens a side-by-side editor with a **live preview** on the right.

<Steps>
  <Step title="Edit the subject line">
    The subject defaults to `{eventTitle}`. Use plain text or mention variables (see below).
  </Step>

  <Step title="Edit the body">
    The body uses a rich-text editor with formatting (bold, italic, lists, links). Default copy includes a greeting and a call to action.
  </Step>

  <Step title="Insert mentions">
    Type `@` in the subject or body to insert a recipient variable. Available mentions:

    | Mention               | What it inserts              |
    | --------------------- | ---------------------------- |
    | `{toUserDisplayName}` | The recipient's display name |
    | `{eventTitle}`        | The event's title            |

    Mentions are replaced with the real value when the email is delivered to each recipient.
  </Step>

  <Step title="Check the preview">
    The right pane previews the rendered email — including the **Save My Spot** button that links to the event page.
  </Step>
</Steps>

The **Send** button is disabled until the subject and body both contain text.

***

## Uploading a custom image (Image mode)

Image mode replaces the entire email body with a single uploaded image.

<Steps>
  <Step title="Switch to Use custom email image">
    Select the second radio option.
  </Step>

  <Step title="Upload the image">
    Click the upload area and select a PNG or JPG. The whole image becomes the email content.
  </Step>
</Steps>

The image is clickable and redirects recipients to the event page.

<Warning>
  **Send Test** is not available in image mode. Image invitations can only be verified by sending the real invitation.
</Warning>

***

## Sending a test email

Before sending to learners, preview the rendered email in your inbox.

<Steps>
  <Step title="Fill in subject and body">
    Send Test is disabled until both fields contain real content (whitespace-only subjects and empty rich-text don't count).
  </Step>

  <Step title="Click Send Test">
    The **Send Test** button sits in the dialog footer next to **Send**.
  </Step>

  <Step title="Pick a test recipient">
    A dialog opens where you select a user to receive the test. The test renders with that user's `{toUserDisplayName}` so you can confirm mentions resolve correctly.
  </Step>

  <Step title="Send and verify">
    The test email is delivered immediately. The **Save My Spot** button in the test points at the real event page — clicking it lets you verify the destination.
  </Step>
</Steps>

Send Test is only visible on the **Event Sessions** step, when **Let learners choose** is selected, and Email mode is active.

***

## Sending the invitation

Once content is valid:

1. Continue through the remaining dialog steps.
2. On the final step, the primary action button reads **Send** (instead of the usual finish label) when an email invitation is queued.
3. Invitees receive the email and appear on the event's invited list.

Saved customizations persist on the event — re-opening **Assign Users** later restores your subject, body, and image so you can build on the previous invitation.

<InternalNote>
  Implemented in `UsersAssignEventSessionSelection.tsx` and `UsersAssignEventDialog.tsx`. Email mode hydrates from `event.customInviteEmail` (`subject`, `textBeforeButton`, `customEmailImg`). Mention suggestions come from `buildVariableSuggestions(intl, notifyDialogMessages)` filtered to exclude `consumptionContext`. Send Test posts to `ContentManagement.postContentManagementNudgeEmailTest` with `hrefOverride: /events/{unitId}`. Rich-text body is converted to plain text for `textBeforeButton` via `htmlToPlainText` (block tags → newlines, then `richTextToPlainText`) and back to HTML on load via `plainTextToHtml`. Send button label switches to "Send" when on the sessions step with `learnerChoose` invitation type.
</InternalNote>