# Manage External Carriers Element

The Manage External Carriers Element allows users to manage their carrier accounts by displaying connected carriers and providing a list of available shipping carriers for connecting pre-configured accounts within ShipEngine Elements.

For more information about External Carrier Connections, refer to the [full carrier connection documentation](/apis/shipengine/docs/carriers/connect).

This can be used as a stand-alone Element and/or utilized within the [Account Settings Element](/apis/shipengine/docs/elements/account-settings/account-settings) via the External Carriers section.

## Configuring Carriers

To enable external carrier connections, you must explicitly list them in the `globalFeatures.enabledExternalCarriers` array within the features prop when initializing Elements.

> **DANGER:**
If you exclude the `globalFeatures.enabledExternalCarriers` property, or set the value to an empty array without including any supported carrier codes, users will not be able to view and connect External Carriers in the [Account Settings Element](/apis/shipengine/docs/elements/account-settings/account-settings) or the [Manage External Carriers Element](/apis/shipengine/docs/elements/account-settings/manage-external-carriers)


For an in depth overview of the global `features` object, please review the Configuring Elements Features step in either the [ElementsProvider](/apis/shipengine/docs/elements/elements-react#configuring-elements-features) or the [Elements SDK](/apis/shipengine/docs/elements/elements-sdk#configuring-elements-features) guides.

#### Supported External Carrier Accounts

- access_worldwide
- amazon_shipping
- amazon_shipping_uk
- an_post
- apc
- apc_overnight
- apicode-dpd-local
- aramex
- asendia
- asendia_uk
- australia_post_mypost_business
- axlehire
- b2c_europe
- better_trucks
- bring_parcels
- brt_it
- canpar
- castle_parcels
- chronopost
- colis_prive
- colissimo
- couriers_please
- dai
- delivengo
- deutsche_post_cross_border
- deutsche_post_dhl
- dhl_ecommerce_au
- dhl_ecommerce_uk
- dhl_express
- dhl_express_australia
- dhl_express_mydhl
- dhl_global_mail
- dhl_parcel_uk
- direct_freight
- direct_link
- doordash_us
- dpd
- dpd_france
- dpd_germany
- dpd_nl
- dpd_poland
- dropoff
- dx
- envialia
- estafeta_mexico
- fairsenden
- fastway_au
- fastway_nz
- fedex
- fedex_uk
- flashbox
- fleet_optics
- gls_france
- gls_germany
- gls_us
- gophr
- grupo_ampm
- hermes_germany
- hermescorp
- inpost
- inpost_it
- intelcom_ca
- intelliquick_delivery
- landmark_global
- lasership
- lettre_suivie
- linex
- loomis_express
- lso
- metroland
- mondial_relay
- n9minutos
- nationex
- netparcel
- new_zealand_couriers
- newgistics
- ninja_van
- now_couriers
- ontrac
- packeta
- packfleet
- parcelforce
- parcll
- parxl
- post_haste
- posta_slovenije
- poste_italiane
- postnl
- purolator_ca
- quantium
- redpack
- rr_donnelley
- seko
- seko_ltl_walleted
- shipx
- skypostal
- speedy
- star_track
- starlinks
- swyft
- the_delivery_group_uk
- tnt_australia
- tnt_uk
- toll_ipec
- toll_priority
- yamato
- yodel


## React Component


```jsx
import { ManageExternalCarriers, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';

const tokenPath = '/path/to/token/endpoint';

const Foo = () => {
  const getToken = useCallback(() => {
    return fetch(tokenPath).then((res) => res.text());
  }, []);

  return (
    <ElementsProvider
      getToken={getToken}
      themeConfig={themeConfig}
      onError={handleError}
      features={{
        globalFeatures: {
          // The list of all ShipEngine carriers available to be activated
          enabledShipEngineCarriers: ['stamps_com', 'dhl_express_worldwide'],
          // The list of external carriers that are available to be activated
          enabledExternalCarriers: [
            'apc',
            'asendia',
            'better_trucks',
            'courierpost',
            'dpd',
            'seko',
            'ups',
            'yodel',
          ],
        },
      }}
    >
      <ManageExternalCarriers.Element isModalFullScreen={true} />
    </ElementsProvider>
  );
};
```

## SDK


```js
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
  features: {
    globalFeatures: {
      // The list of all ShipEngine carriers available to be activated
      enabledShipEngineCarriers: ['stamps_com', 'dhl_express_worldwide'],
      // The list of external carriers that are available to be activated
      enabledExternalCarriers: [
        'apc',
        'asendia',
        'better_trucks',
        'courierpost',
        'dpd',
        'seko',
        'ups',
        'yodel',
      ],
    },
  },
});

const manageExternalCarriers = elements.create('manageExternalCarriers', {
  isModalFullScreen: true,
});
```

| Args/Props | Description |
|  --- | --- |
| `isModalFullSceen` | *boolean*, **optional** If true the connect carrier form modal will take up the whole screen. Defaults to false. |
| `onCarrierConnected` | *function*, **optional** An optional callback function to be invoked after the successful connection of a carrier account. |