Embed Technical Documentation
The following embed settings are available:
interface EmbedSettings {
openStyle: 'float' | 'overlay' | 'push' | 'squish'; // what is the open style? see the Embed page for a preview of each of these options.
openSide: 'left' | 'right'; // which side should the embed open on?
containerClassName?: string; // only used for push and squish
embedId: string; // the unique ID of your embed. this is provided on the Embed page.
startOpen?: boolean; // should the embed automatically open when included on the page?
userId?: string | null; // a unique ID of the user logged into your system.
userEmail?: string | null; // their email address
userName?: string | null; // their name
launchIcon?: { // see below for more information on the launch icon
size?: {
width: string;
height: string;
};
position?: {
top: string;
bottom: string;
left: string;
right: string;
};
style?: string;
content?: string;
};
}
These settings are expected to be set on a window.AtlasSettings property prior to the provided script. Please refer to the embed script provided on the Embed page for an example.
Launching the Embed
You have a few options when considering when and how to launch the embed:
- You can set startOpen to open the embed immediately after this script is included on the page.
- After the script is included on the page, you can call window.openAtlasEmbed().
You can also specify embed settings as an argument, e.g. window.openAtlasEmbed({openStyle: 'float', …}).
- window.closeAtlasEmbed() is available as well to close the embed.
- The launch icon as described below.
We typically recommend launching the embed when the user clicks a "Help" or "Support" button in your UI. For example:
<button onClick={() => window.openAtlasEmbed()}>
Help
</button>
Launch Icon
If you don't have a "Help" button in your UI, you also have the option to place a launch icon somewhere on your page, typically in the bottom right corner. You have control over what the launch icon looks like, including its colors, size, position, and the icon itself. Here's a complete example you can model your own launch icon from:
{
position: {
top: 'unset',
bottom: '5px',
left: 'unset',
right: '5px'
},
size: {
width: '50px',
height: '50px'
},
style: `
.atlas-launch-icon {
width: 50px;
height: 50px;
cursor: pointer;
margin: 0;
border-radius: 50%;
background-color: red;
border: 0;
color: white;
padding: 0;
transition: all 0.5s ease;
}
.atlas-launch-icon:hover {
background-color: green;
transform: rotate(180deg);
}
.atlas-launch-icon svg {
margin-left: 16px;
}
`,
content: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1V15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 8H15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
}