` 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.
### Get the Profile Key
The Profile Key is returned when you create a new profile via the API using the [/profile](/docs/apis/profiles/create-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:
## 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](/docs/additional/maxpack) 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](/docs/additional/maxpack)
(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](#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](#update-logo-on-social-linking-page), when you have set one |
| `.heading-social-accounts` | The page heading, an `
` 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](#help-links-visible) are on |
| `.close-button` | The [Close button](#change-page-title-close-button-and-favicon) 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:
```css theme={"system"}
.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](#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=""]` | One specific network's card; see [below](#target-a-single-network) |
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:
```css theme={"system"}
.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 |
```css theme={"system"}
.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:
```html theme={"system"}
```
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](#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-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:
```css theme={"system"}
.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:
```css theme={"system"}
: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](#css-class-hooks), 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](#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:
```css theme={"system"}
/* 1. Give the element a position, so z-index applies on its own. */
.company-logo {
position: relative;
z-index: 2;
}
```
```css theme={"system"}
/* 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`](#css-class-hooks) 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](/docs/help-center/overview) 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](#set-social-networks-access) 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.
```css theme={"system"}
.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`](#css-class-hooks) as before.
To change only the space between cards:
```css theme={"system"}
.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:
```css theme={"system"}
.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:
```css theme={"system"}
.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](#set-social-networks-access) 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 `` element, so a tag-qualified selector works if you prefer one:
```css theme={"system"}
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.
```css theme={"system"}
/* 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:
```css theme={"system"}
.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](/docs/multiple-users/user-integration) 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](/docs/additional/maxpack) 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.
### 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** 
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](/docs/multiple-users/manage-user-profiles) 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](/docs/apis/overview#authorization) and [PROFILE\_KEY](/docs/apis/overview#profile-key-format) in the header.
You also receive the Profile Key when you create a new User Profile using the [/profiles/profile endpoint](/docs/apis/profiles/create-profile). 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](/docs/multiple-users/manage-user-profiles#primary-profile-lock).
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 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.
### Video Demo of Linking Page Customization Options
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 
You may also lock the team member when you [create the profile](/docs/multiple-users/manage-user-profiles#create-a-new-profile).
### Update Logo on Social Linking Page
Add your own logo and set the logo height for the [social linking page](/docs/multiple-users/user-integration).
Individual User Profiles can suppress this logo on their own linking page via the `hideLogo` parameter on [Create Profile](/docs/apis/profiles/create-profile) and [Update Profile](/docs/apis/profiles/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.
### Set Social Networks Access
Remove or grant your users/profiles access to the available social networks.
By default all social networks are active and available.
See the [create a profile](/docs/apis/profiles/overview#enable-or-disable-social-networks) endpoint for more
information on disabling social networks at the User Profile level.
### Set Language for Social Linking
Set the language for the social linking page. The default is English.
Available languages are:
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](/docs/apis/profiles/create-profile).
### Instagram Login
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](/docs/dashboard/connect-social-accounts/facebook) for authentication.
For example, add you custom text with and anchor link:
```html Custom HTML Modal theme={"system"}