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

# Integrations Types

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

Currently, Box provides the Popup integration type.

## Popup Integrations

In a popup integration, Box opens a panel and loads the application's callback
URL configured for the integration. The application can display its own user
interface for the integration in the popup.

The integration receives a short-lived authorization code with this request,
which can be used to connect to the Box APIs, exchange the code for an Access
Token, and then use that to make API calls to Box.

<Warning>
  Popup panels use HTML `<iframe>` tags to display the embedded content. To
  protect the security of Box's content, callback URLs should use SSL, and the
  response from the callback URL should include an `X-Frame-Options` header set
  to a random string value.
</Warning>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Applications"), href: "/guides/applications/index", badge: "GUIDE" },
{ label: translate("Platform Apps"), href: "/guides/applications/platform-apps/index", badge: "GUIDE" }
]}
/>