> ## 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. # Content Open With export const Link = ({href, children, className, ...props}) => { const localizedHref = localizeLink(href); return {children} ; }; export const MultiRelatedLinks = ({sections = []}) => { if (!sections || sections.length === 0) { return null; } return
{sections.map((section, index) => )}
; }; 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
{}

{title}

{}
{items.map((item, index) => {} {item.badge} {} {item.label} )}
; }; We no longer support the `OpenWith` UI element for any new customers as of December 21, 2021. The Box Content Open With UI Element allows developers to embed a dropdown to open content stored in box with a partner application, or locally on the desktop. The Element fetches information about enabled integrations using the Box API, and calls out to partner services. Users can then take action in these services, and the edited content will be automatically saved back to Box. The integrations included in the Open With Element are Google Suite, and Box Edit. Additional information on the Google Suite integration can be found on the [Box Community site][community]. Currently, the element only supports App Users for authentication. ## Installation Learn how to install Box UI elements either through NPM or the Box CDN. ## Box Edit Box Edit requires additional setup in order to be integrated into a platform application. Box Edit uses the desktop application [Box Tools][tools] in order to open content locally. * Requests must use a secure connection (from an `https` domain) * The application's domain must be allowed by Box Tools. Instructions can be found here. The ideal workflow is to bundle these steps within an installer that also installs Box Tools. * Safari requires a browser extension to connect to box tools. More details can be found [here][safari]. ## G Suite A valid G Suite account is required in order to use the Box for G Suite integration. To connect a user's G Suite and Box account, the `external_app_user_id` of the app user must be updated to be the email address associated with the user's G Suite account. The `external_app_user_id` of an app user can be updated via the `PUT /users/:id` endpoint. ## Setup The Open With UI Element is intended to be used after allowing your application and enabling integrations for app users using Box API endpoints. ### Activate application The 'Open With' UI Element is available to any developer building with the Box Platform. To activate it for your instance, add the "Enable integrations" scope to your application in the developer console. Enable Integrations Once your application has been activated for API calls it will need to be reauthorized in your enterprise. The steps for performing these actions are available here. ## List available integrations The first step to assigning an app integration to a user is to get the list of integrations that are available. This `GET` request can be made with the following `cURL` request. ```sh theme={null} curl -X GET https://api.box.com/2.0/app_integrations \ -H 'Authorization: Bearer [ACCESS_TOKEN]' ``` ```json theme={null} { "next_marker": null, "entries": [ { "type": "app_integration", "id": "10897" }, { "type": "app_integration", "id": "1338" }, { "type": "app_integration", "id": "13418" }, { "type": "app_integration", "id": "3282" } ], "limit": 100 } ``` The app integration IDs are used to assign an integration to a given user. ## Get a specific integration To obtain additional information about a specific integration, based on ID, the following GET request may be made. ```sh theme={null} curl -X GET \ https://api.box.com/2.0/app_integrations/[APP_INTEGRATION_ID] \ -H 'Authorization: Bearer [ACCESS_TOKEN]' ``` ```json theme={null} { "type": "app_integration", "id": "10897", "app": { "type": "app", "id": "336417" }, "name": "Edit with G Suite", "description": "Securely manage your Google Docs, Sheets and Slides in Box", "executable_item_types": [ "file" ], "restricted_extensions": [ "docx", "gdoc", "xlsx", "gsheet", "pptx", "gslides", "gslide" ], "scoped_to": "parent" } ``` ## Add integration to user To add an app integration to a valid app user, three pieces of information are required: * A valid Service Account Access Token. * The ID of the app user to be assigned the integration * The ID of the app integration to assign to the user While the two previous requests to get app integration information can be done with any valid token including a valid developer token, adding and removing app integrations requires a valid service account's access token. Using a developer token will produce a `404 Not Found` error. The following `POST` request can be made to assign an app integration to an app user: ```sh theme={null} curl -X POST https://api.box.com/2.0/app_integration_assignments \ -H 'Authorization: Bearer [SERVICE_ACCOUNT_TOKEN]' \ -d '{ "assignee": { "type": "user", "id": "[APP_USER_ID]" }, "app_integration": { "type": "app_integration", "id": "[APP_INTEGRATION_ID]" } }' ``` ```json theme={null} { "type": "app_integration_assignment", "id": "72048301", "assignee": { "type": "user", "id": "6084519920" }, "app_integration": { "type": "app_integration", "id": "3282" } } ``` The ID in the JSON response can be used to manage app integrations after assignment, and should be stored by the application. ## Remove integration from user To remove an app integration from an app user, the following request may be made with a valid service access token and the app integration assignment ID from the previous step. ```sh theme={null} curl -X DELETE https://api.box.com/2.0/app_integration_assignments/[APP_INTEGRATION_ASSIGNMENT_ID] \ -H 'Authorization: Bearer [SERVICE_ACCOUNT_TOKEN]' ``` ```sh theme={null} 204 No Content ``` ## Sample HTML ```html theme={null} Box Content Open With Demo
``` ## Demo ### Open With Example