20:I[80532,["https://cdn.supademo.com/v3.25.84/_next/static/chunks/1s2fk1qiohww4.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2gcobcunlw64r.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3hmex_cb1t3kl.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/09avfn1e0ica7.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/19smqnel40bj3.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3xo6-h2m3txsp.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/25qi2qzf4193s.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/08owegqtobyk0.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0dh-gcuzjb-s5.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3kj767owr3l2x.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2jo_qx3cuh_qp.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2utjyouv-rab-.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/36k-3k236u26x.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3hurkyjme4q1r.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3-7_u291g0vl1.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3k75tcv2684z2.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1w07f1tscgpso.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/35hiitja80hpt.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2msopkmn-v204.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3f163oqmqrna9.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0zg75d6vrr9oy.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1zsklqhlqkjc9.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3npu85ymaq_6l.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1p5_v0ahgna_r.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/210q3aiz27ng_.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0h_c8n_gyrya-.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3h71hfz5dkusp.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1w8bha6u2v21m.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/04ald6z8hw3iv.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2yma_4r8y2mtr.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2_y4q2uwm3dwx.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2lhcdv1d_aw4t.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/14e707kgxt4_n.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3kljlha7jzjcc.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0bx8fnnqyeh0j.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0pb6956lprj0z.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1_776vsoy65cr.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2jfwdvldr2ine.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/006-jpn0_cwzx.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0t1-7p6cmwjaw.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/26s_3dx9k2kg8.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2qkqhul4fqg4t.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/318de45sfhkoh.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2hz_mevhilhr6.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/19j-sk9t22_b0.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/095bf44zuyjd-.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/143vsbxpqh8l0.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1pvryc76htbar.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3seguq22rbg57.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3orp2j7f6yz8-.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1z9uzl7jp8dgt.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3o0gf83a_2ud9.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/3q2pkoabxir6e.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1akd1zuadq633.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/0hguu9dlgyy3f.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/23e96sbqgdt5f.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/350rgf14x7sgr.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/12ytt05ct1dhk.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/29j4nql9u51k9.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/2277ivz64igcb.js","https://cdn.supademo.com/v3.25.84/_next/static/chunks/1oneabg2h1n55.js"],"EmbedViewPage",1] 21:Ta903,

Starting/Stopping Atlas Widget

Starting Atlas Widget

(()=>{"use strict";
  var t,
    e ={
      appId:"YOUR_APP_ID",
      v:2,
      q:[],
      call:function(){
        this.q.push(arguments);},};
  window.Atlas = e;
  var n = document.createElement("script");(n.async =!0),(n.src ="https://app.atlas.so/client-js/atlas.bundle.js");
  var s = document.getElementsByTagName("script")[0];null===(t = s.parentNode)|| void 0=== t || t.insertBefore(n, s);})();

window.Atlas.call("start");

Stopping Atlas Widget

window.Atlas.shutdown()

Proxying Atlas APIs to your own server

window.Atlas.proxyUrl ='https://api.yourserver.com/api/v1/atlas_proxy'

Passing customer/company information to Atlas

To pass customer information to atlas, you can call Identify with the relevant information. Whenever user is logged into your application, you can make the following call

  window.Atlas.call("identify",{
    userId:'123',
    name:'John Doe',
    email:'john@example.com',
    phoneNumber:'+14153101234'})

🔒

To make sure scammer can't spoof a user, you should pass a userhash into identify call (read more about it here )

Passing other customer details

here are the other set of fields that you can pass to identify call so your agents have required details to solve tickets. You can set create custom fields in Atlas to pass any additional fields.

  window.Atlas.call("identify",{
    userId:'123',
    name:'John Doe',
    email:'john@example.com',
    phoneNumber:'+14153101234',
    userHash:'39d97cc77da23fb515d37e6cea066692a799cf85d1330489e2c',
    fields:{
        title:'CEO',
        department:'Sales',
        photo:'https://cdn.filestackcontent.com/2dq5VghRlipv4aWAPAUE',
        street1:'1 main street',
        street2:'#123',
        city:'San Francisco',
        country:'US',
        postalCode:'94102',},
    customFields:{'field1_key':1,'field2_key':'B','field3_key':'2021-01-23',}})

Passing Company Information

If you want to pass company information to Atlas, you can pass it in identify call it self.

  window.Atlas.call("identify",{
    userId:'123',
    name:'John Doe',
    email:'john@example.com',
    phoneNumber:'+14153101234',
    userHash:'39d97cc77da23fb515d37e6cea066692a799cf85d1330489e2c',
    account:{
        name:'Acme Inc',
        email:'support@acmeinc.com',
        website:'https://acmeinc.com',
        externalId:'account_id',
        monthlySpend:'999',
        industry:'Computers',
        customFields:{'account_field1_key':'1','account_field2_key':'A','account_field3_key':'2023-01-12',}}})

Chat Startup Options

Don't start chat on Atlas widget startup

window.Atlas.call("start",{
  chat:{
    enabled:false}})

Start chat when Atlas chat was disabled on startup

window.Atlas.chat.start()

Stop Atlas chat

window.Atlas.chat.stop()

Chat Bubble visibility options

If you want to hide the default atlas chat bubble and give your customer a custom option to start chat by a different button you can use the following options

// Hide the bubble on startup
window.Atlas.call("start",{
  chat:{
    hideBubble:true}})

Opening Atlas chat when a user clicks a button on your app

You might have elements in the UI which might blocked by Atlas chat bubble, if you want to add a "Live Chat" or "Contact Support" like button in your UI, which triggers Atlas chat, you can hide the chat bubble by default as shown above and then open the chat window using following method when user clicks on "Contact Support" button.

window.Atlas.chat.openWindow()

Hiding Atlas bubble programmatically

if you want to hide Atlas chat bubble in some page (like onboarding flow or some public facing part of your app) you can hide the chat bubble using the following method.

window.Atlas.chat.hideBubble()

To show the Atlas chat bubble agin you can use the following method

window.Atlas.chat.showBubble()

If you want to stop Atlas window from auto opening when new agent message comes to Customers, you can pass openIncoming as false. This is useful if want to show a counter in the UI on unread message instead of auto opening the widget.

window.Atlas.call("start",{
  chat:{
    hideBubble:true, 
    openIncoming:false}})

Chat callback to Agent/Customer Actions

window.Atlas.call("start",{
  chat:{
    hideBubble:true, 
    openIncoming:false,
    onNewAgentMessage:(message)=>{
      console.log(message);},
    onWindowVisibilityChange:(visible)=>{
      console.log(visible)}}})

Open chat widget with pre set message

Atlas.call('showNewChat',{ text:'Hello'})

Positioning Options

With SDK you should be able to control position and offset of your chat bubble, here are the options

window.Atlas.call("start",{
    chat:{'position':'bottomLeft','offset':[20,21]}});

Layout Options

If you are using layout menu and want to add a option that triggers some workflow in your app, you can use that as a callback option. To register a call back with Atlas, you could do the following

window.Atlas.call("start",{
    callbacks:{
        hello:()=>alert('hello!')},})

Updating Chat Settings dynamically

If you want to update position of chat dynamically or switch colors, you can update any of the configuration using the update method

window.Atlas.call('update',{'chat':{'position':'bottomLeft','offset':[80,21]}});

Controlling chat visibility based on location

If you want to limit visibility of your chat to certain country or hide it from certain country, you can use the following methods

Enable Chat for only specific countries

Atlas.call('start',{
    access:{ countries:['US']},})

Disable chat for specific countries

Atlas.call('start',{
    access:{
        countries:['US'],
        inverseCountries:true,},})

Styling the widget

To control the style of chat widget

Atlas.call('start',{
  chat:{
    brandColor:'linear-gradient(180deg, pink 0%,gold 84%)',// or color '#ff0000'
    textColor:'light', 
    maxHeight:'50%',// can be any CSS unit
    maxWidth:300,// if number is passed it will be interpreted as pixels
    launcher:{
      label:'Welcome',},
    widget:{
      title:'H1',
      subtitle:'H2',// can be the http(s) url as well
      logo:'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',},},})

Session Recording Options

If selectively want to control on which pages session should be recorded, you can control it using the follow options

Don't start session by default

window.Atlas.call("start",{
  recording:{
    enabled:false}})

Start session recording on specific pages/paths

window.Atlas.recording.start()

Stop session recording on specific pages/paths

window.Atlas.recording.stop()

If you want to get the current session id so you can pass it a APM or error monitoring tools like sentry, you can get it using following method

window.Atlas.recording.getSessionId()

💡

Read more about how to to hide/mask certain information from getting recorded.

Helpcenter Options

To open up help center in chat widget

window.Atlas.call('openHelpCenter')

To open up a help center category in chat widget

window.Atlas.call('openArticlesCategory','category')

To show an helpcenter article article directly in chat widget, you can use the following method

window.Atlas.call("openArticle",{"slug":"703242-session-recording"});

To open up helpcenter search

window.Atlas.call('openArticlesSearch','how to setup helpcenter')

Start Chatbot

If you have created several chatbots you may want to open specific one for your user conditionally:

window.Atlas.call("triggerChatbot","CHATBOT_KEY");

The CHATBOT_KEY is a string that you can find in the Chatbot Setup window. When you navigate to your Chatbot graph click the entry block and you will find the "Chatbot Key" field in the opened modal window.

ℹ️

Ensure that in the Chatbot Setup window the "Start Conversation" is set to "Via SDK" to make it available for Atlas.call().

11:["$","$L20",null,{"demo":{"id":"cmubom0gi03wxqm062op33xwe","createdAt":"2026-09-21T20:12:25.938Z","updatedAt":"2026-09-29T19:21:35.488Z","title":"Install and Configure Atlas Across Multiple Platforms","published":true,"color":"bg-gray-200","authorId":"cmt1ny9gx0008wj0j4u4aoajq","metadesc":"Learn how to install and configure the Atlas widget across web and mobile platforms including JavaScript, React, Next.js, Flutter, React Native, Swift, Kotlin, and integrations with Wix, Framer, Google Tag Manager, and Webflow.","customMetadataImage":null,"ctabtntext":"Create demo","ctabtncolor":"#4f46e5","ctabtntextcolor":"#fff","ctabtnlink":"https://supademo.com","autoplay":false,"autoplayduration":2000,"autoPlayDelay":1000,"customizePerStep":false,"showplaypause":true,"loop":false,"progressbar":true,"showPlayBar":true,"font":"Default","workspaceId":"cm18xz2bt044aki5zssgvfrc4","darkmode":false,"shared":true,"folderId":"cmuldm02j00023u0juj0dmydh","border":true,"nextButton":true,"showSteps":false,"globalSettings":true,"hotspotTextVisible":true,"hotspotAnimationVisible":true,"hotspotOpacity":100,"number":null,"topBar":true,"indexable":true,"displayAuthor":false,"displayDescription":false,"showSupademoLink":true,"showReplayButton":true,"showFullscreenButton":true,"showCCButton":true,"disableKeyboardNavigation":false,"captionsPosition":"Bottom","archived":false,"archivedAt":null,"domainURL":"https://app.atlas.so/inbox/all","brandLogo":null,"allowDuplicate":false,"recordOwnVoice":false,"backgroundId":null,"backgroundMusicUrl":null,"backgroundMusicVolume":50,"demoSource":"Extension","type":"Default","fullWidth":false,"detectBrowserLanguage":true,"sourceLanguage":"English","customFontId":null,"mobileHotspotView":true,"config":null,"showWatermark":null,"watermarkLogoUrl":null,"watermarkText":null,"watermarkLink":null,"sendNotification":true,"allowExternalComments":false,"currentPublishedVersion":null,"hasUnpublishedChanges":true,"author":{"id":"cmt1ny9gx0008wj0j4u4aoajq","name":"Astrid Jauregui","image":"https://lh3.googleusercontent.com/a/ACg8ocLzitlpGHQr-hHwyQSRDaAnoqxkvI6_2Xr1SIoYostga4DRWg=s96-c"},"steps":[{"id":"cmubop3gx044iqm06lkgi2lgt","number":1,"text":null,"image":null,"video":null,"createdAt":"2026-09-21T20:14:49.809Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"0","mouseYCooridnate":"0","editedImage":null,"widthOrg":1024,"heightOrg":485,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/kgFfHiU07qAZ7gnxGBDoG.mp3","audioText":"Installing a support widget shouldn't mean digging through docs — Atlas hands your developers the exact code for their platform, right here.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":7.288163265306123,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/kgFfHiU07qAZ7gnxGBDoG.vtt","zoomPositionX":null,"zoomPositionY":null,"zoomWidth":null,"zoomHeight":null,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":null,"recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[],"chapter":{"id":"cmubop3h3044kqm06cpv01vne","stepId":"cmubop3gx044iqm06lkgi2lgt","enabled":true,"type":"Link","skip":false,"heading":"Install and Configure Atlas Across Multiple Platforms","description":"Find the right install code for your stack: JavaScript, React, Next.js, Flutter, React Native, Swift, Kotlin, or integrations with Wix, Framer, Netlify, Google Tag Manager, and Webflow.","headingColor":"#fff","descriptionColor":"#fff","theme":"Dark","blurIntensity":24,"embedCode":null,"layout":"Left","coverImageType":"STEP","coverImageSource":null,"logoEnabled":true,"logoSource":"","logoAltText":null,"emailValidationMode":"CompanyEmail","phoneValidationEnabled":false,"labelledFormEnabled":false,"buttons":[{"id":"cmubop3hg044nqm06gbzvv9w1","createdAt":"2026-09-21T20:14:49.828Z","updatedAt":"2026-09-21T20:14:49.828Z","chapterId":"cmubop3h3044kqm06cpv01vne","content":"Get Started","btnColor":"#4f46e5","color":"#fff","linkTxt":"cmubom9nu03x2qm0673fi5cf8","isLinkExternal":false,"openInNewTab":true,"animation":"Ripple","order":0,"isBold":true,"isItalic":false}],"backgroundId":null,"background":null,"formFields":[]},"videoProject":null},{"id":"cmubom9nu03x2qm0673fi5cf8","number":2,"text":null,"image":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/leFvMwRrB3PJK2plX3inr.jpg","video":null,"createdAt":"2026-09-21T20:12:37.866Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"2.604166666666667","mouseYCooridnate":"4.390779363336993","editedImage":null,"widthOrg":1920,"heightOrg":911,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/s7sCRKLLZ5pxu2x0Ng8WJ.mp3","audioText":"First, open the main menu — this is where every Atlas setting lives.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":4.25795918367347,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/s7sCRKLLZ5pxu2x0Ng8WJ.vtt","zoomPositionX":null,"zoomPositionY":null,"zoomWidth":null,"zoomHeight":null,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":"https://app.atlas.so/inbox/all","recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[{"id":"cmubom9nu03x3qm0671w47638","number":1,"createdAt":"2026-09-21T20:12:37.866Z","updatedAt":"2026-09-29T19:21:30.381Z","default":true,"text":"Open the main menu.","bgcolor":"#4f46e5","textcolor":"#fff","mouseXCooridnate":"2.604166666666667","mouseYCooridnate":"4.390779363336993","style":"Circle","animation":"Ping","isVisible":true,"boxWidth":null,"boxHeight":null,"prevslide":null,"nextslide":null,"stepId":"cmubom9nu03x2qm0673fi5cf8","tipposition":"right","nextButton":true,"textVisible":true,"htmlValue":"

Getting Started

Installation

JavaScript

See full API documentation here.

Anywhere after the above snippet you can add this code to identify your users:

TypeScript support

JavaScript

React

Next.js

","aiText":null,"aiTextVisible":false,"anchorNodeId":null,"anchorPosition":"BottomCenter","nextButtonText":null,"backButtonText":null,"hotspotWidth":"Medium","textAlign":"Left","modalPosition":"Center","borderRadius":"Round","nextButtonAction":"Slide","nextButtonUrl":null,"nextButtonBgColor":null,"nextButtonTextColor":null,"nextButtonDisabled":false,"backButtonAction":"Slide","backButtonUrl":null,"backButtonBgColor":null,"backButtonTextColor":null,"backButtonDisabled":false,"timelineElementId":null}],"chapter":null,"videoProject":null},{"id":"cmug230pi0016ow1yqiarr73v","number":23,"text":null,"image":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/uWXEWzE3wt-V8Ow9td85E.jpg","video":null,"createdAt":"2026-09-24T21:40:39.126Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"66.796875","mouseYCooridnate":"43.85290889132821","editedImage":null,"widthOrg":1920,"heightOrg":911,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/z7n50Go8kbbmFVM-k_K_s.mp3","audioText":"Moving to Mobile — Flutter lets one codebase power both your iOS and Android apps.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":4.963265306122449,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/z7n50Go8kbbmFVM-k_K_s.vtt","zoomPositionX":10,"zoomPositionY":0,"zoomWidth":90,"zoomHeight":90,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":"https://app.atlas.so/configuration/installation/javascript","recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[{"id":"cmug230pq0018ow1ygd9cac20","number":20,"createdAt":"2026-09-24T21:40:39.135Z","updatedAt":"2026-09-29T19:21:34.946Z","default":true,"text":"Flutter · iOS and Android.","bgcolor":"#4f46e5","textcolor":"#fff","mouseXCooridnate":"66.796875","mouseYCooridnate":"55.13","style":"Area","animation":"Pulse","isVisible":true,"boxWidth":19.53125,"boxHeight":3.622392974753018,"prevslide":null,"nextslide":null,"stepId":"cmug230pi0016ow1yqiarr73v","tipposition":"left","nextButton":true,"textVisible":true,"htmlValue":"","aiText":null,"aiTextVisible":false,"anchorNodeId":null,"anchorPosition":"BottomCenter","nextButtonText":null,"backButtonText":null,"hotspotWidth":"Medium","textAlign":"Left","modalPosition":"Center","borderRadius":"Round","nextButtonAction":"Slide","nextButtonUrl":null,"nextButtonBgColor":null,"nextButtonTextColor":null,"nextButtonDisabled":false,"backButtonAction":"Slide","backButtonUrl":null,"backButtonBgColor":null,"backButtonTextColor":null,"backButtonDisabled":false,"timelineElementId":null}],"chapter":null,"videoProject":null},{"id":"cmug230uq001aow1yqi9lrdcs","number":24,"text":null,"image":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/uWXEWzE3wt-V8Ow9td85E.jpg","video":null,"createdAt":"2026-09-24T21:40:39.314Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"66.796875","mouseYCooridnate":"43.85290889132821","editedImage":null,"widthOrg":1920,"heightOrg":911,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/_eyVFy8Luyd5-n653WibJ.mp3","audioText":"React Native is for mobile apps written in JavaScript — perfect if your web team also ships mobile.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":5.746938775510204,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/_eyVFy8Luyd5-n653WibJ.vtt","zoomPositionX":10,"zoomPositionY":0,"zoomWidth":90,"zoomHeight":90,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":"https://app.atlas.so/configuration/installation/javascript","recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[{"id":"cmug230ux001cow1yu2ym2c1v","number":20,"createdAt":"2026-09-24T21:40:39.322Z","updatedAt":"2026-09-29T19:21:35.122Z","default":true,"text":"React Native · JavaScript mobile apps.","bgcolor":"#4f46e5","textcolor":"#fff","mouseXCooridnate":"66.796875","mouseYCooridnate":"59.19","style":"Area","animation":"Pulse","isVisible":true,"boxWidth":19.53125,"boxHeight":3.622392974753018,"prevslide":null,"nextslide":null,"stepId":"cmug230uq001aow1yqi9lrdcs","tipposition":"left","nextButton":true,"textVisible":true,"htmlValue":"","aiText":null,"aiTextVisible":false,"anchorNodeId":null,"anchorPosition":"BottomCenter","nextButtonText":null,"backButtonText":null,"hotspotWidth":"Medium","textAlign":"Left","modalPosition":"Center","borderRadius":"Round","nextButtonAction":"Slide","nextButtonUrl":null,"nextButtonBgColor":null,"nextButtonTextColor":null,"nextButtonDisabled":false,"backButtonAction":"Slide","backButtonUrl":null,"backButtonBgColor":null,"backButtonTextColor":null,"backButtonDisabled":false,"timelineElementId":null}],"chapter":null,"videoProject":null},{"id":"cmug2311p001eow1yieq37dp1","number":25,"text":null,"image":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/uWXEWzE3wt-V8Ow9td85E.jpg","video":null,"createdAt":"2026-09-24T21:40:39.566Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"66.796875","mouseYCooridnate":"43.85290889132821","editedImage":null,"widthOrg":1920,"heightOrg":911,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/Ic5oQ_s-BexoePXQfYTfq.mp3","audioText":"Swift is for native iPhone and iPad apps built with Apple's own tools.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":4.205714285714286,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/Ic5oQ_s-BexoePXQfYTfq.vtt","zoomPositionX":10,"zoomPositionY":0,"zoomWidth":90,"zoomHeight":90,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":"https://app.atlas.so/configuration/installation/javascript","recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[{"id":"cmug2311x001gow1y0d5gj56f","number":20,"createdAt":"2026-09-24T21:40:39.573Z","updatedAt":"2026-09-29T19:21:35.274Z","default":true,"text":"Swift · native iOS apps.","bgcolor":"#4f46e5","textcolor":"#fff","mouseXCooridnate":"66.796875","mouseYCooridnate":"63.25","style":"Area","animation":"Pulse","isVisible":true,"boxWidth":19.53125,"boxHeight":3.622392974753018,"prevslide":null,"nextslide":null,"stepId":"cmug2311p001eow1yieq37dp1","tipposition":"left","nextButton":true,"textVisible":true,"htmlValue":"","aiText":null,"aiTextVisible":false,"anchorNodeId":null,"anchorPosition":"BottomCenter","nextButtonText":null,"backButtonText":null,"hotspotWidth":"Medium","textAlign":"Left","modalPosition":"Center","borderRadius":"Round","nextButtonAction":"Slide","nextButtonUrl":null,"nextButtonBgColor":null,"nextButtonTextColor":null,"nextButtonDisabled":false,"backButtonAction":"Slide","backButtonUrl":null,"backButtonBgColor":null,"backButtonTextColor":null,"backButtonDisabled":false,"timelineElementId":null}],"chapter":null,"videoProject":null},{"id":"cmuboo8a4041xqm06zqqq0p3v","number":26,"text":null,"image":null,"video":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/videos/34sNalzradz9poMWHAT3Q.mp4","createdAt":"2026-09-21T20:14:09.388Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"0","mouseYCooridnate":"0","editedImage":null,"widthOrg":1024,"heightOrg":485,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":1024,"videoHeight":486,"videoDuration":1.282,"videoProjectId":"cmuboo89h041rqm06q6ytua8l","audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/t4uuTVaI2Wzh9Qp2hnsEY.mp3","audioText":"Keep scrolling for Kotlin and the Integrations — Wix, Framer, Netlify, Google Tag Manager, and Webflow — which add Atlas without writing code.","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":8.855510204081632,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/t4uuTVaI2Wzh9Qp2hnsEY.vtt","zoomPositionX":null,"zoomPositionY":null,"zoomWidth":null,"zoomHeight":null,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":null,"recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[],"chapter":null,"videoProject":{"id":"cmuboo89h041rqm06q6ytua8l","createdAt":"2026-09-21T20:14:09.365Z","updatedAt":"2026-09-21T20:14:09.365Z","title":"Video Step 30","authorId":"cmt1ny9gx0008wj0j4u4aoajq","workspaceId":"cm18xz2bt044aki5zssgvfrc4","shared":true,"folderId":null,"published":true,"archived":false,"archivedAt":null,"status":"COMPLETED","width":1024,"height":486,"transitions":null,"settings":null,"segments":[{"id":"cmuboo89x041vqm061n95v3j9","createdAt":"2026-09-21T20:14:09.382Z","updatedAt":"2026-09-21T20:14:09.382Z","projectId":"cmuboo89h041rqm06q6ytua8l","assetId":"cmuboo89q041tqm06db302gke","lane":"MAIN","order":0,"sourceStart":0,"sourceEnd":1282,"startTime":0,"endTime":1282,"muted":false,"mirror":false,"playbackRate":1,"layout":null,"crop":null,"asset":{"id":"cmuboo89q041tqm06db302gke","createdAt":"2026-09-21T20:14:09.374Z","updatedAt":"2026-09-21T20:14:09.374Z","workspaceId":"cm18xz2bt044aki5zssgvfrc4","authorId":"cmt1ny9gx0008wj0j4u4aoajq","storageKey":"cmt1ny9gx0008wj0j4u4aoajq/videos/34sNalzradz9poMWHAT3Q.mp4","storageProvider":"S3","streamKey":null,"streamStatus":"IDLE","status":"READY","source":"SCREEN","width":1024,"height":486,"pixelRatio":null,"duration":1282,"fileSize":49385,"hasAudio":false,"mimeType":"video/mp4","interactions":null},"timelineElements":[]}]}},{"id":"cmuboock70428qm06enk177yz","number":27,"text":null,"image":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/HgLSRWDQGurvRNYhOa3wE.jpg","video":null,"createdAt":"2026-09-21T20:14:14.935Z","updatedAt":"2026-09-24T21:42:16.280Z","demoId":"cmubom0gi03wxqm062op33xwe","imageWidth":"688","imageHeight":"0","mouseXCooridnate":"59.27083333333333","mouseYCooridnate":"25.795828759604827","editedImage":null,"widthOrg":1920,"heightOrg":911,"bgcolor":"#4f46e5","textcolor":"#fff","imgState":null,"trimStart":0,"trimEnd":100,"videoWidth":null,"videoHeight":null,"videoDuration":null,"videoProjectId":null,"audio":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/audio/Y1ZaD_XB2HbQRwFvHhI7s.mp3","audioText":"Here's Kotlin, for native Android apps. Whatever your stack, your developers get the exact install guide in one click. Nice work!","voice":"tnSpp4vdxKPjI9w0GnoV","audioLanguage":null,"audioDuration":7.96734693877551,"captionsUrl":"https://media.supademo.com/cmt1ny9gx0008wj0j4u4aoajq/captions/Y1ZaD_XB2HbQRwFvHhI7s.vtt","zoomPositionX":null,"zoomPositionY":null,"zoomWidth":null,"zoomHeight":null,"playbackRate":1,"mute":null,"mediaFitMode":"Cover","mediaAlignMode":"Top","htmlCaptureId":null,"backdrop":"None","pageUrl":"https://app.atlas.so/configuration/installation/kotlin","recordingSessionId":null,"preventScroll":false,"scrollTopOverride":null,"scrollOverrides":null,"duration":null,"transition":null,"customDescription":null,"hotspots":[{"id":"cmuboock70429qm06cxborhzg","number":32,"createdAt":"2026-09-21T20:14:14.935Z","updatedAt":"2026-09-29T19:21:35.466Z","default":true,"text":"Review Kotlin instructions.","bgcolor":"#4f46e5","textcolor":"#fff","mouseXCooridnate":"59.27083333333333","mouseYCooridnate":"25.795828759604827","style":"Circle","animation":"Ping","isVisible":true,"boxWidth":null,"boxHeight":null,"prevslide":null,"nextslide":null,"stepId":"cmuboock70428qm06enk177yz","tipposition":"bottom","nextButton":true,"textVisible":true,"htmlValue":"

Kotlin