Manage Multiple User Profiles - Ayrshare API Documentation

The dashboard is for your internal team only. On the Launch, Business, and Enterprise plans, the dashboard is where your team creates and manages User Profiles, tests, and posts on a client’s behalf. Your customers are never given dashboard access — they connect their social accounts through the white-labeled JWT URL connect page. In production, create and manage profiles programmatically with the API. (The single-user Premium plan is the exception: there is no multi-user layer, so you use the dashboard directly yourself.)

Using the Dashboard

If your Ayrshare account is entitled to manage multiple profiles, then you will see the option for User Profiles in the left-hand navigation.

If your account does not have the option to manage profiles, then contact your Ayrshare representative or contact us to upgrade.

Create a New Profile

Click the Add Profile button and enter your User Profile Title.

Switch to the New Profile

You will see the new Profile show up in the Active Profiles section. You can now click on the switch to this profile icon to switch to that User Profile.

When you switch to a different User Profile, you will see that profile name shown in the top left of the screen under the profile icon. You can always switch back to your primary account profile by clicking the switch profile link next to the Primary Profile or by clicking the Switch to Primary button at the top of the User Profiles page. From here you are acting as your client/user and can post on their behalf by going the the Post page.

Get the Profile Key

The Profile Key is used to post on behalf of the profile with the API. Switch to a User Profile and go to the Profile Key page in the left-hand navigation of the Dashboard to get that profile’s Key. When making an API call, be sure to include your API_KEY and PROFILE_KEY in the header. You also receive the Profile Key when you create a new User Profile using the /profiles/profile endpoint. This is the preferred method to get the Profile Key.

Invite a Team Member

You can create Users Profiles for members of your team. By default, Team Members have an Ayrshare account with full access/admin rights to the dashboard and count as a new User Profile. Please note, you may restrict access by locking the Primary Profile.

You can only invite team members who have not yet been registered with Ayrshare. If you want to use an already registered email, please have the user login to the dashboard, go to the Account page, and click the Delete button.

In the User Profiles page, switch to your Primary Profile and click the + Add Profile button at the top of the page. In the pop-up modal, click the checkbox “Create a team member profiles with admin rights” box and enter your team member’s email address.

Click Add Team Profile and an email is sent to the team member’s email address with a link to activate their account.

Team Member Status

Once the team member has accepted the invite you will see a green check mark next to the Team Member tag.

If the team member has not yet accepted the invite you may resend it by clicking the mail icon.

Team Members Contacting Support

For security, only registered team members may contact support on behalf of a business. We will not be able to assist if they are not registered and verified as a team member of your business.

Reactivate a Suspended User Profile

Suspension Reason

When a User Profile gets suspended due to a social network violation (such as a Facebook community standards violation), you will receive a detailed notification email. This email contains important information about the suspension, including the specific reason and the affected User Profile. To locate this notification email:

Search your inbox using the RefId of the suspended User Profile
The email subject will clearly indicate a suspension has occurred

Alternatively, you can view suspension details directly in the dashboard by clicking on the “Suspended” tag that appears next to the affected User Profile. All API calls for that User Profile will return a 403 HTTP status code.

Reactivate a Suspended User Profile

You may reactivate, i.e. unsuspend, the User Profile by:

Logging into the Dashboard and going to the User Profiles page.
Find the suspended User Profiles by clicking the “Suspended” tab or searching by the RefId of the User Profile, which is included in the email.
Unsuspend the User Profile by clicking the “Unsuspended” button.
Review and accept the compliance certification.

For a User Profile’s first suspension, the User Profile can be immediately unsuspended once you accept the compliance certification. However, for subsequent suspensions the User Profile will be reinstated 48 hours after accepting the compliance certification.

We recommend you do not use your Primary Profile as a regular User Profile. If the Primary Profile is suspended, all user profiles will also be suspended.

Managing Active User Profiles

Effective management of User Profiles is essential for maintaining an efficient system in Ayrshare. We recommend implementing a policy to remove inactive User Profiles based on your business requirements. For example, if a user hasn’t engaged with your platform by posting content, requesting analytics for some time period, or has not connected any social networks, consider deleting their Ayrshare User Profile, thus keeping your user base current and reducing future costs. You can check if a User Profile has been active in the current month by reviewing their posting history and API usage and connections. If you determined it to be inactive, delete the User Profile.

White-Label the Connect Accounts Page

The connect accounts (social linking) page is the only Ayrshare interface your customers ever see, so you can white-label it to match your brand. Settings below are configured once by your team from the Primary Profile and apply to the page your users open via the JWT URL. Available on the Launch, Business, and Enterprise plans:

Add or remove your company logo and set its height.
Choose which social networks your users can connect.
Set the page language.
Show your own help links or hide Ayrshare’s.
Set the top and sub headers per User Profile (e.g. the client’s name or business).
Control the Close button redirect back to your app.
Customize the Instagram and Telegram modals with your own HTML.

Available with the Max Pack (and included with Enterprise):

Apply a custom CSS file to control colors, fonts, and which features show, using documented class hooks to restyle the connect buttons themselves.
Color the linking dialogs — page pickers, credential forms, and confirmations — to match your page.
Set your own page title, Close button text, and favicon.
Add custom footer text or HTML.

See the User Integration page for how this looks from your user’s perspective.

Settings

In the User Profiles page select “⚙️ Settings” button to access global settings for your profiles. Be sure to first switch to your Primary Profile to access the settings.

Video Demo of Linking Page Customization Options

Restrict User Profile Access

Restrict Primary Profile Access

Restrict access to the Primary Profile from user and team member profiles by locking the Primary Profile. Activate the Primary Profile lock if you want to prevent team members or user profiles from accessing Profile Settings or the Account/Billing page.

When activated team member and user profiles will not be able to switch to the Primary Profile, but may switch to other team member or user profiles.

Restrict Team Member Access

Restrict access to team member profiles by locking their account. This prevents the team member from switching to any other User Profile. Enable the lock by clicking the or icon in the top right of a team member profile.

You may also lock the team member when you create the profile. Add your own logo and set the logo height for the social linking page.

Individual User Profiles can suppress this logo on their own linking page via the hideLogo parameter on Create Profile and Update Profile. The account-wide logo on every other profile is unaffected. This is useful when an agency white-labels one partner while keeping branding on the rest of their profiles. Remove or grant your users/profiles access to the available social networks. By default all social networks are active and available.

Permissions are global across all your user profiles. Disabling only removes the network from your user’s Social Accounts view and does not remove established links.

See the create a profile endpoint for more information on disabling social networks at the User Profile level. Set the language for the social linking page. The default is English.

Set Language for the Social Linking Page

Available languages are:

English
Chinese (Simplified)
French
German
Spanish

If you require a language that is not listed, please contact us. See here for additonal translation options:

Display Page Location

On the social linking page, if a Meta (Facebook or Instagram) or Google Business Profile Page has a location associated with it, display that location information along with the Page name. This additional location context is helpful in scenarios where there are multiple Pages with identical names, as it allows users to differentiate between them more easily.

The Page location, if available, will be displayed below the Page name in the social linking page:

Help Links Visible

Enable or disable visibility of the links to the Ayrshare help docs on your users’ social linking page. You can also use your own by entering a URL to your publicly available docs.

Alternative Emails for Alerts

Choose different email addresses to deliver alerts, such as unlinked accounts.

Further customization, such as the title can be done via the /profiles endpoint. Enable or disable Instagram login on the social linking page.

Choose whether to enable direct Instagram Login linking that does not require a connected Facebook Page for authentication. If disabled, Instagram linking will require a connected Facebook Page for authentication.

Instagram Login is enabled by default. If you require the advanced features listed below (hashtag search, collaborations, location tagging, or brand data), you must manually disable this option to use Facebook Page authentication instead.

Direct Instagram Login Instagram API with Instagram Login allows Instagram professionals (businesses and creators) to link their accounts directly without needing an associated Facebook Page. This provides a simplified authentication flow. Facebook Page Authentication (traditional method) requires users to first connect a Facebook Page that is linked to their Instagram professional account. While direct Instagram Login offers convenience, certain features are not available when using this method:

Brand/User Data - Cannot retrieve Instagram account information through the brand endpoints.
Hashtag Search - Cannot search for hashtags on Instagram.
Collaborations - Cannot invite collaborators to Instagram posts.
Location Tagging - Cannot add location tags to Instagram posts.
idId- Legacy Instagram User ID - field not returned for Instagram social analytics.

Which Method Should You Choose?

Enable Direct Instagram Login if you only need basic posting functionality and don’t require the advanced features listed above.
Disable Direct Instagram Login (use Facebook Page authentication) if you need access to all Instagram features, including hashtag search, collaborations, location tagging, or brand data retrieval.

For most clients, the preferred method is to use the direct Instagram Login authentication. If you’re unsure which method to use, we recommend disabling Direct Instagram Login to ensure access to all features. You can always enable it later if you determine the advanced features are not needed.

Custom Modals

You can customize the content shown in the Instagram and Telegram modals on the social linking page with your own custom HTML content, such as displaying the content in different languages. For Telegram, your content replaces the modal’s default instructions. For Instagram, the modal only appears when you provide custom content — otherwise, clicking Instagram goes straight to the configured login flow: Instagram’s own login or, if you have disabled Instagram Login, a Facebook login. Your custom content can include formatted text, images, or a combination of both to better suit your needs.

For example, add you custom text with and anchor link:

Custom HTML Modal

<div>
  <style>
    span.underline {
      color: blue;
      text-decoration: underline;
    }
    span.underline a {
      color: blue;
      text-decoration: none;
    }
  </style>

  <span class="underline">
    Everyone agrees that
    <a target="_blank" href="https://www.ayrshare.com">Ayrshare Rocks!</a>
  </span>
</div>

The HTML must be enclosed in <div> tags. Add custom CSS to add color and/or underlining to anchor links.

Using the API

Create and Manage Profiles

You can create, delete, and manage your profiles via the API using the /profiles endpoints. Please see below for details.

Profile

Get the Profile Key

The Profile Key is returned when you create a new profile via the API using the /profile endpoint. If you need to get the profile key again, go to the Dashboard to retrieve. See above.

Enable Messaging

You can enable messaging for your Ayrshare account in the Account page. Please see here for more details:

Messages

Max Pack Customization

In the Ayrshare Dashboard page User Profile -> Setting, you can customize aspects of the social linking page. Please see the Max Pack for details on the capabilities and features.

Customize CSS

Use your own CSS file to customize the look and feel of the social accounts page: color, fonts, hide features, change buttons, and more. A CSS file also fixes the page to the light color scheme. Your users are not shown the light/dark switch on a social linking page that has a CSS file, so your stylesheet alone decides how the page looks. Pages without a CSS file keep the switch.

CSS Class Hooks

The page carries stable class names so your stylesheet has something to select: on the page itself, on the grid the cards are laid out in, and on each social network card. These names are a contract: a stylesheet written against them keeps working across dashboard releases, so you can safely build on them.

Hosting your own stylesheet is available with the Max Pack (and included with Enterprise). The Custom CSS field is read-only without it. These class names apply to the white-labeled social linking page your users open, not to your own dashboard.

Anything not listed on this page is not a contract. In particular, do not select the page’s own generated class names (they change without notice). See Updating an older stylesheet. Page elements

Selector	Applies to
`.main-content`	The page content wrapper, edge to edge — put your page background here
`.social-linking-page-column`	The centred, width-capped column inside it that the content sits in
`.social-linking-header`	The header band holding your logo, the heading and the instruction block
`.company-logo`	Your logo, when you have set one
`.heading-social-accounts`	The page heading, an `<h1>` element
`.additional-info`	The instruction block below the heading
`.additional-info__body`	The same element as `.additional-info`; see the note below
`.additional-info-text`	The instruction text inside that block
`.troubleshooting-guide`	The “Having trouble?” link, when help links are on
`.close-button`	The Close button that ends linking

.main-content and .social-linking-page-column are different elements, and the difference is what lets you widen the content without narrowing your background. The column carries the maximum width; the wrapper spans the full page. To run the cards wider than the default, set the width on the column:

.social-linking-page-column {
  max-width: none !important;
}

Card layout These two are new, so no older stylesheet selects them. Both are containers: they change where the cards sit and how wide they are, not how a card looks. See Change the Card Layout.

Selector	Applies to
`.social-accounts-grid`	The grid that lays the cards out, and the `gap` between them
`.social-account-card-wrapper`	The grid cell holding one card, the element that owns that card’s width

Social network cards

Selector	Applies to
`.social-account-card`	Every social network card, connected or not
`.connected-card`	A card whose network is connected
`.unlinked-card`	A card whose network is not connected yet
`.social-account-icon`	The square holding the network’s logo on a card
`.social-account-name`	The network’s name on a card
`.social-account-avatar`	The connected account’s profile picture, on a connected card
`.click-to-link`	The “Click to link” call-to-action text on an unconnected card
`[data-platform="<network>"]`	One specific network’s card; see below

Every card carries .social-account-card plus exactly one of .connected-card or .unlinked-card, so the connected and unconnected states can be styled independently. .social-account-icon is the square, not the logo drawn inside it. To resize a logo, size both — sizing only the square leaves the logo at its original size and it overflows:

.social-account-icon {
  width: 24px !important;
  height: 24px !important;
}
.social-account-icon :is(svg, img) {
  width: 21px !important;
  height: 21px !important;
}

Status badge colors The “Connected” and “Messaging” badges on a connected card read two custom properties. Set them anywhere above the badge — .social-account-card is the natural place — and every badge on that card follows:

Property	Sets
`--ayr-pill-bg`	The badge background
`--ayr-pill-fg`	The badge text and icon

.social-account-card {
  --ayr-pill-bg: #1b3a2b;
  --ayr-pill-fg: #79bd96;
}

No !important is needed here, because a custom property is not competing with a generated rule. Leaving them unset renders the default colors.

Warning badges — “Relink required”, “Reconnect”, “Identity check” — deliberately ignore these properties and keep their own colors. They tell your user that an account has stopped working and needs their attention, and a warning painted in the same color as “Connected” reads as reassuring. Those badges have no selector of their own for the same reason.

How the elements nest A card is five levels below .main-content, and one of those levels has no class name of its own:

<div class="main-content">
  <div class="social-linking-page-column">
    <div class="social-linking-header">
      <div><img class="company-logo" /></div>
      <div>
        <h1 class="heading-social-accounts">…</h1>
        <div class="additional-info additional-info__body">…</div>
      </div>
    </div>
    <div class="social-accounts-grid">
      <div class="social-account-card-wrapper">
        <div>
          <!-- unnamed clickable wrapper, always the full width of the cell -->
          <div class="social-account-card unlinked-card" data-platform="tiktok">
            <div>
              <div class="social-account-icon">…</div>
              <div>
                <p class="social-account-name">TikTok</p>
                <p class="click-to-link">…</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      …
    </div>
    <div><button class="close-button">…</button></div>
  </div>
</div>

The card above is an unconnected one. A connected card carries .connected-card instead of .unlinked-card and swaps the last two pieces: .click-to-link is replaced by the status badges, and a .social-account-avatar holding the connected account’s picture is added after the text column. So .click-to-link and .social-account-avatar never appear on the same card. Select the named elements rather than the unnamed ones between them. The unnamed levels are not part of the contract and are the reason a rule that counts levels down from .main-content (.main-content > div, .main-content > div > div > div, .main-content > div:not(.additional-info)) lands a level or two off its target rather than on the grid or a card. See Updating an older stylesheet if your stylesheet has rules of that shape. Style the card itself with .social-account-card, and reach for .social-accounts-grid or .social-account-card-wrapper when you want to change the layout rather than the card. See Change the Card Layout. Change the order of the page To move the whole blocks of the page around — for example to put the instruction block at the bottom — flatten the containers between the page column and the pieces you want to order, then order them:

.social-linking-page-column {
  display: flex !important;
  flex-direction: column !important;
}
.social-linking-header {
  display: contents !important;
}
/* Your logo, the instruction block and the Close button each sit inside a
   further wrapper that has no name of its own. Flatten those too, or `order`
   below has nothing to compare. */
.social-linking-header > div,
.social-linking-page-column > div:has(> .close-button) {
  display: contents !important;
}

.company-logo {
  order: 0 !important;
}
.social-accounts-grid {
  order: 1 !important;
}
.close-button {
  order: 2 !important;
}
.additional-info {
  order: 3 !important;
}

display: contents removes a container from the layout while keeping its children, which is what puts your logo, the grid and the Close button on the same level so order can compare them. order only applies to items that are direct children of a flex container, so every wrapper in between has to be flattened — that is what the middle rule does. The heading and the instruction block share one box, so they move together; hide the heading with .heading-social-accounts { display: none !important } if you only want the instruction block.

The two selectors in the middle rule are the one place on this page where you still have to reach an element that has no name. They are anchored to named elements one level up, so they are far more durable than counting down from .main-content — but they are the rules to check first if a future release changes how the page reorders.

Elements that depend on a setting (your logo, the “Having trouble?” link, the Close button) only exist in the page when that setting is on, so a rule targeting one is simply inert until then.

Your rules need !important to take effect. The page’s own styles are generated with a higher specificity than a plain class selector, so a declaration without !important is silently ignored.

Restyle .click-to-link, do not hide it. It is the only thing on an unconnected card that tells your user the network is not connected yet and that the card can be clicked. A rule like .click-to-link { display: none !important } leaves a card showing nothing but the network name, which reads as inactive. If you want your own wording or badge instead, add it to the card with .unlinked-card::after rather than hiding the text and relying on a replacement elsewhere.

.additional-info and .additional-info__body match the same element. They were previously two nested elements, so if your stylesheet sets different values for the same property on each, they now compete on one element and the more specific rule wins instead of both applying. Combine them into a single rule.

Linking Dialog Colors

The dialogs on the linking page — the unlink confirmation, the Facebook and LinkedIn page pickers, the Bluesky and X credential forms, and the Telegram activation code box — read ten custom properties. Set the ones you want and leave the rest out; anything you do not set keeps its default. Set them on :root or body, not on .social-account-card. Dialogs are rendered outside the page content, so a value set on a card or on .main-content never reaches them. This is the single most common reason a dialog rule appears to do nothing.

Property	Sets
`--ayr-dialog-backdrop`	The overlay behind the dialog
`--ayr-dialog-bg`	The dialog panel background
`--ayr-dialog-fg`	The dialog title, and the Cancel / Close button label
`--ayr-dialog-muted-fg`	Secondary text: the subtitle, body copy, field labels, and placeholders
`--ayr-dialog-border`	The dialog panel border
`--ayr-dialog-radius`	The dialog panel corner radius
`--ayr-dialog-accent`	The selected radio button or checkbox in a page picker
`--ayr-dialog-input-bg`	Text field background, and the Telegram code box
`--ayr-dialog-input-fg`	Text typed into a field, and the Telegram code and Copy button
`--ayr-dialog-input-border`	Text field outline, and the Telegram code box border

A complete dark example, with every property set:

:root {
  --ayr-dialog-backdrop: rgba(10, 10, 10, 0.66);
  --ayr-dialog-bg: #161616;
  --ayr-dialog-fg: #e7eae6;
  --ayr-dialog-muted-fg: #9aa0a6;
  --ayr-dialog-border: #262626;
  --ayr-dialog-radius: 22px;
  --ayr-dialog-accent: #79bd96;
  --ayr-dialog-input-bg: #0f0f0f;
  --ayr-dialog-input-fg: #e7eae6;
  --ayr-dialog-input-border: #3a3a3a;
}

No !important is needed, because a custom property is not competing with a generated rule.

Keep --ayr-dialog-fg and --ayr-dialog-muted-fg distinct. The title and the secondary text default to different tones, and setting both to the same value flattens the hierarchy. If you set only one, set --ayr-dialog-fg — a darkened panel whose title does not follow it can leave the heading unreadable.

These properties carry color and radius only. The dialogs have no class hooks, so a stylesheet cannot hide a panel, a page list, or the confirm and cancel buttons. A dialog is where your user picks which Facebook Page to link or confirms an unlink, and hiding part of one would strand them mid-flow with no way out.The primary action button in a dialog is not covered by these properties and keeps its own colors. Its background is painted as a gradient, so a background-color rule cannot replace it.

Updating an Older Stylesheet

If you wrote your stylesheet before the dashboard was rebuilt, some rules may no longer match. Rules built on the selectors documented above keep working. Rules built on anything else do not, and cannot be restored:

The page’s own generated class names. Class names you may have copied out of browser developer tools (for example anything beginning with chakra-) belong to the framework the page is built with, not to a public contract. Those class names no longer exist and there is no equivalent to swap in. Rewrite the rule against the selectors in the tables above.
Bare element or attribute selectors such as div > div or button[type="button"]. The page’s structure is not a contract and has changed, so a rule counting levels down from .main-content now lands on a different element than it did before. This is the most common reason a layout rule appears to do nothing, or does something unexpected.
Positional rules that counted elements to reach the card grid. Before the grid and the cells had names, the only way to reach them was to count levels down from .main-content, using rules shaped like .main-content > div, .main-content > div > div, .main-content > div > div > div or .main-content > div:not(.additional-info). Those rules still match something, which is why they are easy to miss: .main-content is still there, but a card now sits five levels below it, so each rule lands a level or two off target. A rule aimed at the grid can end up on the wrapper holding the page header, and a rule aimed at one card can end up resizing every card at once. Replace them with the two names that now exist for this: .social-accounts-grid for the grid, and .social-account-card-wrapper for the cell holding one card. See Change the Card Layout.
Rules that only work on a flex item: z-index, order, align-self, flex. These are the hardest to spot, because the selector still matches and the declaration is still valid — it simply has no effect. On the older page your logo, heading, instruction block and Close button were direct children of .main-content, which your stylesheet made a flex container, so each of them was a flex item. A flex item honours z-index even without position, and honours order and align-self. On the rebuilt page those four sit inside wrappers, so they are no longer flex items and all four properties stop applying to them. The symptom is usually something vanishing rather than moving. A z-index on your logo, for example, is what used to lift it above a fixed header bar drawn with .main-content::before — without it the bar paints straight over the logo and the logo appears to be missing entirely, even though it loaded correctly and is the right size. Two fixes, either is fine:
/* 1. Give the element a position, so z-index applies on its own. */ .company-logo { position: relative; z-index: 2; }
/* 2. Or flatten the wrappers, which makes these elements flex items again and restores z-index, order and align-self together. This is the same recipe as Change the order of the page, above. */ .social-linking-page-column { display: flex !important; flex-direction: column !important; } .social-linking-header { display: contents !important; } .social-linking-header > div, .social-linking-page-column > div:has(> .close-button) { display: contents !important; }
.linked-tag. The older page put this on the status badges of a connected card. It is not part of the contract above, deliberately: a connected card can now also show “Relink required” or “Identity check”, so a rule hiding .linked-tag would hide a warning your user needs to act on. If your stylesheet hides .linked-tag and draws a replacement badge of its own, the replacement will not appear. Style .connected-card itself instead, and leave the status badges visible.

If you are unsure whether your stylesheet still works, open your linking page and check that each rule takes effect. The stylesheet loads either way, so rules that no longer match fail silently rather than reporting an error. Contact support if you would like help rewriting one.

Target a Single Network

Use the data-platform attribute rather than a position-based selector such as :nth-child. The networks available to your users can be filtered per account or per User Profile, which changes how many cards render and in what order. Position-based selectors break when that filter changes, and data-platform does not.

.social-account-card[data-platform="tiktok"] {
  /* ... */
}

The value is the network’s key on this page: bluesky, facebook, gmb, instagramApi, linkedin, pinterest, reddit, snapchat, telegram, threads, tiktok, twitterByok, whatsapp, youtube

Two of these differ from the platform names you send to the API: on this page Instagram is instagramApi and X/Twitter is twitterByok.

Change the Card Layout

By default the cards flow into a responsive grid: one column on a phone, two on a tablet, and three on a desktop. Two selectors control that layout, and which one you want depends on what you are changing:

.social-accounts-grid is the grid itself. It is a flex row that wraps, and the space between cards is its gap. Use it to change that spacing, or to replace the layout entirely.
.social-account-card-wrapper is the cell holding one card. Its width is what decides how many cards fit per row, and the page sets that width per screen size.

The cell is the only element on which a card’s width, or the number of cards per row, can be changed. Everything between the cell and the card already fills the cell’s full width, so a width set on .social-account-card (or on the unnamed wrapper between them) repaints the card inside a cell that has not moved, and the columns stay exactly where they were. Neither of these is the card. To restyle a card’s border, background, or text, use .social-account-card as before. To change only the space between cards:

.social-accounts-grid {
  gap: 24px !important;
}

To put every card on its own full-width row, one rule covers every screen size, because !important also wins against the widths the page sets in its own screen-size rules:

.social-account-card-wrapper {
  width: 100% !important;
}

To set your own column count, take the grid over completely. The cell width has to be released as well, otherwise it fights the columns you just defined:

.social-accounts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.social-accounts-grid .social-account-card-wrapper {
  width: auto !important;
}

If you have restricted the page to one or two networks, the row does not fill its columns, and the page centers it for you. On .social-accounts-grid it sets a width and a max-width that narrow the grid to the cards it actually has, and align-self: center to center that narrower box, with automatic side margins as a fallback. On each .social-account-card-wrapper it sets a correspondingly wider width, so the cards keep the size they have in a full row. All of this applies only at the screen sizes where the row is actually short. With three or more networks the row is always full and none of it is set at all. Your own rules override either element as normal, with !important, but note that align-self is the declaration doing the centering: to align a short row differently, override that as well as the widths.

Avoid selectors that count elements, such as .main-content > div > div > div. The page’s structure is not a contract and changes between releases, so a rule like this can start matching a different element, or every card at once, without your stylesheet changing. The two selectors above are stable and are the supported way to reach the layout.

Example: Hide the Page Heading

The heading is an <h1> element, so a tag-qualified selector works if you prefer one:

h1.heading-social-accounts {
  display: none !important;
}

Example: Restyle Unconnected Cards as Buttons

By default an unconnected card is a recessed grey surface with muted text, which some users read as unavailable rather than as something to click. The rules below turn every unconnected card into an outlined button in your brand color and leave connected cards untouched.

/* Unconnected cards become outlined buttons. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* An !important rule also wins over the page's own hover styles,
   so restate the hover state you want. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* The muted call to action becomes the button label. */
.social-account-card.unlinked-card .click-to-link {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

For a solid fill instead, set the card background and recolor its text. Only the selectors in the table above are a contract, so recolor the network name with a plain descendant selector:

.social-account-card.unlinked-card {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.social-account-card.unlinked-card p {
  color: #ffffff !important;
}

The network logo on an unconnected card is intentionally desaturated and has no selector of its own, so it stays greyscale on a colored background. Preview your stylesheet on the linking page before rolling it out to your users.

Change Page Title, Close Button, and Favicon

Set your own page title, close button, and favicon (.ico file).

Footer Text

Customize the footer text and add copyright information on the social linking page. This allows you to display the footer text in different languages.

Enterprise Features

Max Pack

All the feature of Max Pack included with Enterprise.

Automatically Resync Facebook and Instagram Pages

When security events occur on Facebook, such as password changes, all Facebook pages associated with that user account (including linked Instagram accounts) need to be reconnected to Ayrshare. For accounts managing numerous pages, this process can be time-consuming.

The “Resync” option is available when connecting Facebook or Instagram pages.
By enabling this feature, all previously connected pages will be automatically relinked to the user profile.
Note: Only previously linked pages will be reconnected; new pages will not be added automatically.
This feature supports Facebook accounts with up to 400 pages.
For accounts exceeding 400 pages, it’s recommended to distribute pages across multiple Facebook accounts.
Best Practice: Only use the “Resync” option when necessary to reconnect all pages. For routine operations, it’s generally not required.

White List IP

Enhance your account security by whitelisting specific IP addresses. This feature restricts API access to only approved IP addresses, adding an extra layer of protection to your Ayrshare integration.

Technical and Security Reviews

Collaborate directly with Ayrshare’s project team for comprehensive technical and security reviews. This service ensures that your integration aligns with best practices and meets your organization’s specific security requirements.

Dedicated Account Management with Priority Support

Receive personalized support from a dedicated account manager who understands your unique needs and can provide tailored solutions. Enjoy priority access to technical support, with faster response times and escalation procedures for critical issues.

Custom API Endpoints

For enterprises with specific requirements, Ayrshare can develop custom API endpoints to seamlessly integrate with your existing systems and workflows.

​Using the Dashboard

​Create a New Profile

​Switch to the New Profile

​Get the Profile Key

​Invite a Team Member

​Team Member Status

​Team Members Contacting Support

​Reactivate a Suspended User Profile

​Suspension Reason

​Reactivate a Suspended User Profile

​Managing Active User Profiles

​White-Label the Connect Accounts Page

​Settings

​Video Demo of Linking Page Customization Options

​Restrict User Profile Access

​Restrict Primary Profile Access

​Restrict Team Member Access

​Update Logo on Social Linking Page

​Set Social Networks Access

​Set Language for Social Linking

​Display Page Location

​Help Links Visible

​Alternative Emails for Alerts

​Instagram Login

​Direct Instagram Login vs Facebook Page Authentication

​Feature Limitations with Direct Instagram Login

​Which Method Should You Choose?

​Custom Modals

​Using the API

​Create and Manage Profiles

Profile

​Get the Profile Key

​Enable Messaging

Messages

​Max Pack Customization

​Customize CSS

​CSS Class Hooks

​Linking Dialog Colors

​Updating an Older Stylesheet

​Target a Single Network

​Change the Card Layout

​Example: Hide the Page Heading

​Example: Restyle Unconnected Cards as Buttons

​Change Page Title, Close Button, and Favicon

​Footer Text

​Enterprise Features

​Max Pack

​Automatically Resync Facebook and Instagram Pages

​White List IP

​Technical and Security Reviews

​Dedicated Account Management with Priority Support

​Custom API Endpoints

Using the Dashboard

Create a New Profile

Switch to the New Profile

Get the Profile Key

Invite a Team Member

Team Member Status

Team Members Contacting Support

Reactivate a Suspended User Profile

Suspension Reason

Reactivate a Suspended User Profile

Managing Active User Profiles

White-Label the Connect Accounts Page

Settings

Video Demo of Linking Page Customization Options

Restrict User Profile Access

Restrict Primary Profile Access

Restrict Team Member Access

Update Logo on Social Linking Page

Set Social Networks Access

Set Language for Social Linking

Display Page Location

Help Links Visible

Alternative Emails for Alerts

Instagram Login

Direct Instagram Login vs Facebook Page Authentication

Feature Limitations with Direct Instagram Login

Which Method Should You Choose?

Custom Modals

Using the API

Create and Manage Profiles

Get the Profile Key

Enable Messaging

Max Pack Customization

Customize CSS

CSS Class Hooks

Linking Dialog Colors

Updating an Older Stylesheet

Target a Single Network

Change the Card Layout

Example: Hide the Page Heading

Example: Restyle Unconnected Cards as Buttons

Change Page Title, Close Button, and Favicon

Footer Text

Enterprise Features

Max Pack

Automatically Resync Facebook and Instagram Pages

White List IP

Technical and Security Reviews

Dedicated Account Management with Priority Support

Custom API Endpoints