diff --git a/examples/index.html b/examples/index.html
index 064a2b6..775f36e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -31,6 +31,7 @@ <h1>Gist for Web</h1>
     </div>
     <div class="row examples">
       <a href="#" class="button" onClick="showHTMLMessage()">Show HTML Message</a>
+      <a href="#" class="button" onClick="showMultiStepMessage()">Show HTML Multistep Message</a>
       <a href="#" class="button" onClick="showSimpleMessage()">Show Simple Message</a>
       <a href="#" class="button" onClick="showMessageWithProperties()">Show Message With Properties</a>
       <a href="#" class="button" onClick="showComplexMessage()">Show Complex Message</a>
@@ -102,6 +103,7 @@ <h4>Gist.setUserToken()</h4>
     <script src="../dist/gist.js"></script>
     <script type="text/javascript">
       var EncodedTestHTMLMessage = "eNrdWG1v2zYQ/p5fwWkfkgCWZcd2V7i2hy1dVwxpMyAphn0aKPEkcaFIgaT80qL/fUfLSRRFcpVsKwoTdiKRx7vjPc+RPM++e315fv3n77+Q1GZicTRz/4igMpl7ID3XAZQtjgi2WQaWkiil2oCdex+u3/gvveqQpBnMvSWHVa609UikpAWJoivObDpnsOQR+NuXHuGSW06FbyIqYD7sD25VWW4FLH67unxPrCJvr99dkBW3KTm/upoF5WApaOzm9tm1ULEN+XT36lqMDvgxzbjYTMlPGs31iKHS+AY0j1/dyX4+unvsZ2AMTeCNxsXU1IU0ukm0KiTzIyWUnpLv47iipvRCM9C+powXZkqGg3z9UCCjOuFySs4ejeSUMS6TpqFQrX2TUqZWUzIgZ/majPGrk5CeDHpk9+kPT5uXFPM1sAtu7B+cJWBrq2Lc5IJigGIBNbOux2dcQ2S5Qp9x1UUm9xh5qzT/iEGn4jnm/i6M5fHG3/GmFPFBsmaLdOvVzgjPkpqhLc+mZPQomCnwJLVNI1GhjYM1Vxw90M1mLaybV7Zlm+EfAWF/+Uj1jjCj0aiZD44pZLAntr9qzvZHNEGJh8pdj28hw3ELfgkfslJDDtSeTHpkGOvThikJzevcbY18PxQqumn0rCFhBoMfwi/kzLgeu6dQJoKHyLlGBU+kzzEOplmgFXfXrMYdg5cJUF8QJt3IEKAGnhioaaqWoLuEa/IiHHVR3omWL9poOdi2lv1o0sYDU+glbK7cDn5BQxCmhZkdcDM5xbMhBLsCaNthlEJwrnGdNTNu6f4W5GZ4qxEYd0rMilnaCNXWJINIaVoyA0EDLbiEzjuK+zsLdofYLCjP2Zk7xXbnG+NLEglqzNyrHkre/ZFXFamQqyJRl6odBTXJRummPb1hXn1ulZ0eUfJc8OjmbiV9pEbGjTk5fdWia6vP7epGR3MvtTY30yBA1WBNP0FP+mHBBQtudzcT8AwVm8DRFjCDhDLQz2XiYf7jHeTcvZOfC2uVbHM/QP8bItLS3Sn4TdL3qeotrlNuCH4oKZOJ3K6nvPRQ4ggmMQouyXokVSuyUoVgZKMKNwaE2x+/luNfZk/rrPvTa8+sZ3Lok7t4To8vcydNhsef95LqeWH4b8LSlRXDFugadXQT7SDWReTfonN2AOicHSw6owNAZ3Sw6IwPAJ3xwaIzOQB0Jt8iOnuGv9bFpxtO1RmPSqMnXHuqiLxGouEN0MQc2BNZXFVz1VHHNxDr+zLPW1zgZR9vxMYSozIgWF/dYAnf7j19nKwqB/lBi5NjV0JgBZEolQjoRyo77pFdBsccS25VWD9TGrDbUu1q9OO/QkHlDea1t7hENYRLvJBLWKFAOAtoexiV/p99rLqENabGqhfr9QRaveqOXq2r8rp7nAVlkYo1q/vN+B8CSHpg";
+      var EncodedTestMultiStepMessage = "H4sIAAAAAAAA/+x9W3PbyPHvuz9FL7cS2ymxOfcLJSq1YU6OzilvkkqyetiXFEQOScQgwACgLqvydz81AAa8iJa9Pl7Vbv2HdlFozExP36anB/iV9Arg4pt5MasfNg5W9Tq79Hf8BWRJvpwMtvl8APO0nAySbV0MfLPv4JJ5ewlwsXZ1ArNVUlaungy29WJoBjDqm78ZDuEfblas1y6fuzncpu5uU5Q11AW4vNqWDtJ8mGw2FVSzJHOwKYuNK7MHSGZlUVUwd7fpzFUwHB5M2V0D5MnaTQaB7aC/Pyvy2uX1ZHCXzuvVpGUzbIgzSPO0TpNs2Ew5oUjOYJ3cp+vtev/WtnJlQyc3mZuQwHt0qHsrwKzICt955dZusJs8L8p1ku0bpE7rzF1ejNqf4W5VP+wogHFZFDU89rRXZ8d/DC3b8779w6v+svHe/sji1pXVrCyybHjjVsltWpSeQe7OYfSHA98sihLWxU2aOa+699CmdLcur2HpqnpbugoWZbGGdXGb5kuoV8F3UCwWUM1K53L4w2hf6m1Z+enmbpFss3pf4HB1U8wfDuRdFHk9XCTrNHsYw3dlmmRnUCV5NaxcmS7O93quk3KZ5mMg+zeHd+7mfVoPGzbVuijqVZovx5Dk3uNpUrn5Qfd18dOwqO6f9F+WyUMTC0+FvhjtuatzHc7Y+yW5SR+zNHfDlUuXq3pMUZ7vq3PlsltXp7PkbE+hDzirVzOXvX/cJPO5n9ts7v3dW8IfUvt4k8zeL8tim8/H3y6c/3d+U5RzVw7LZJ5uq6b7TXE/rFbJvLgbE2CbexCbeyBQLm+SN+QMuv9I3543gTT+ljSf09KdH+sQBGOeq/8690G1yIq7sc8L7ezpT75LJ9pN0ahAN2q5drPHeVptsuRhvMhce3/9vqxu08dmOY4t+d1HWCRZusyH3WoaV3VS1r0wpLUSLZY/ZSp5bP2X/uTGzBvkUAUmz7tg6UaJzTq5f+jmp/9f89fl4oZVj6cZ3LrSWzQbNpzG63Q+z9z5OrkfhqnJ787bS9a5nb6fm/Vt/rgncO3u645D6TVquwlVKjFeeVccBAkhQiUEvknXPiMmedv9P0tjjXlMsmy8zStXn3drc1Okee3K8+CiNG9Md5MVs/fne0Ke1u9Iky64/tJ8zncuoWpz35J3rUs0Ia1WdZnk1aIo1+MmJe1pOnONXM2duZsVZVKnRd522/dumq9cme78Qo0Pfb8mDmwi9UycWDhNkN5uEmUfn87duYCzliOEhZnLGTMf708Ou6v3+YoeLoH/bKs6XTz0kdWNb8Mtrd26CrdCCHteLfthXWxag3b0TVHXxXo83J8ONo+dLxKasBu27wt25AtByOFy2ZurbHvsc8Ykn62KcnhXJpuNKw8VO6HBSQe2wgXX7XhnxbJorJKkuSsfl8mmmfxTc3yMAWTJjct+OVMczVbdLh9Pr/jAj7XD7xb/eWD/fTy55toYHZPzWZZuxqWb1W/o5v4MDr7ennfbnO803CT1apz6Vf1Gkt+9PT95M4iwn71X6Xzu8hC3Q9/Wp7fzTVGljceSm6rItrUL6WBzf363Sms3rDbJzI3zwofC+YewLV6MdgXiRbO9A/SFzjy9hVmWVNVk0O2YcB9CaQC7CuhV8993b26FIe1OCbO0GK5dVSVLN7xNq/Qmc211Nk/qpG9pK7Pvi3mSwRCmTaic6NZ5Yeir4Mlg7bs/06tpHwbbTAazPbbPfV2Gi16nU19Bz3bvh9lqtn54vx2c5tT/OMEyMOp24Gc4PDe43aafGdw7akU/xqPdn0/xaD//WqUVpBUk0JgWWoNCZ/dvLkYrerlT9mI0T28vPy16u8F/SvKDcOw23t7oEEJ4W9dF3g0r8lmWzt5PBp18OE+rdVpVbx4/vA0HhGYZTAZ+q4V2r+0L4W63Hex773KfOLgAuEjXyz3yoA2gKmeTwaquN9V4NKrqovQCLYtimblkk1Y4K9Yjv1TaKn1Yu/UmS2pXDas6yedJVuRulFSVq6vRLCsqN+wWPyrCORGO4SZfDj4+/wGRZPVk8Ezn3sxtwXQY2+1ndHlsg4tRa/3LY9cf0k+pA8e2G/xph7arvr01OPTEE19Xq+Lu+/b6TXMwOoPXIb38qdmFX5/B4+//uy3qc5982qtx+4O2P3Zh8urILm2FBqGyOxkj7WztXK+eMdCxCdqS5ZexwN9uXZklD70N4J1b1M8Ygn0NQ4RJ96b89dnjX8UG/uF33Weswb+mNfoJP2GLsG8sisLn2jBXU9UMumc/Lu8e/WR1vzNfJKHvYRE4gFXpFrtcNNtWNabFiD+4n/5vWQ36hL25/LOr0mXu5pDkc5i7LL11pZvDXVqvLkabU3XCYZE12OWIi2qT5L3wbU01gMvptqqLtSsxLS5Gvsv+iNv9dHqburs/FfeTAQECVgigzO7no0WaZZOBL1j3796vs7xqdR2PRnd3d3jHsSiXI0YIGVW3exlzf5+7WEJfl00G2zJ7862nyb8t1/+m5u3g8iBdXqyT6v3BHYB0Phn422HM4Ki923h8l6aaGUO2Xad5ks/ccVff54c8ravJYFu58p++kvtb/kP1pKO3zvG9hxP32sdsAyvEcUtbeE4GR8Y9tE6jsjcNzCeD770vyBW5psxeWSGuyY+DzhlN4TnY3ymakSOvz9G9ZaNkZ+p9sx2b+rSxd+amHzH3zzL4zzB5Y3T29O7DZDCkT2/3ln/ikz3b8ycDj23Q2f/JXeg8QlFrDkOCjFtJ2BVDxhRn3kf+1lXX47rv8eNTceDAi0+aR0/8csKvpzxLP+rZT2glkQtGQSKRVuorJZAxIa65QqKFeRfalUZiLHvXtYM1yBhXO93bfu8oU8gF7duP+XTzPGOZb7+j37E/nXD+E9s8r5kwqI1gwAhKovU7zpExKXpNg/eChFSjUkqApKgEZX3/Y81D/yP+L6BRkNAwVFKpd50Gna1N74tO8l5CSjkqfew7c6ThzgId/xfQyEiK1Iq9NWU4Q3pNDRpJ+VXX/lkr6mvJxChDbjgIjoRpNWWMoDE20MCYQUYoCIOUcAqME2SWglQolLhiwiITbMqERioZcIPKag6MU+RcAlNoCaPgp5FcBHpKLUEtdN9ONUNlqZ+WarWjlUJLJZ8G2lJUvjry46kESjQqLRr2jPf0NEjZtwuFgmiwChVTCjqxQWu0iturrv+UMY2WcDAKtaYWvDW0aKaVknBorSUCPWWEoLE9DdT6dgOGIhNG9nSvRkdLhsZQ8MOllTtjHzrjBdzPiUJlDGiK3Ao+DbQRaA1VwKxForVXkEnGgVmCpienzFDUyuyatURtDRiJlBPa01ogMUxcMx8egl8xqVAKc601MqrptKPBauTaR5kySL2bG/9JYEb4M2qgp8wK5DsaOGHoo4gIJJYBJxopV97dlkl2TYlCwvkVZxK1sb0YnbbXnfYvkQKoQOqTjkSjKb/SliNVtpewa7/u2l9i47AcCdmtTKEJKh/63coUkiFTEgRDqa3q6RDSgbYUrTUM/HjOdksv8A9LU1LZLKHQLjlHubeyAx34B1owZIZQ8OPlXmY5kv/HXqGwRoUhKJTt16jQFK3yS1QKHahem5aUDDWnEvxYTk2/QAPvkC0l8crovl1SjsaysL4D2evS0cbrqiSE4b1oh6K/gPcVZ37F9d5XjKJipreu8hnJLzCK3DBQpEvzFrXgdKr8umMaOPF7rwTpw5mpfrg0AgnbBZfUHI3ea1cSrTLdeA5S0aae4hoNoSFf0CspWLNQ22XCrnw/bem14ki4YNOOBmF9OjYglUVBmu2EM2lAao2KmEBPpV9fVOzaLUOird/ljCSipxVBInbTKkqRGtZP29EgfTehQVGD2rKerfJ62t20iktkRO7aBUWhZT9toI+nVQQ1E9fShxGbdiRwiZQKBUpoFGJn1COfvkAUaWKaNd9HkdGo98JAKYNay34NB1op1ErpaaAt84pQ8OMps32O0MQiUbscopn0htm1C4rSaqCEIJcWtFDINRiOnBt9pZlGqaeacbQWLEFGFGiq0LBmTmmFbuZQigZ6qqxBxVjfroxvDzsjKGN8pQLaZwpDr7QvgKi5Vgal1Gra0SAoEuNF8tUq2aXVI5P9+L1nSJhfQkgl1VM/H1dNSDLJJCir0fh8StFwzhsGhLFAT7WPPaV37UyhZMKP14RI8EYQ1Ab+V918L7HnEYaEKRAKFSXNopZCqqkhBJXxmzsyoRhoa1AL4WlitQbtqzWpAj3VxqIVdNduJCrqaxKUljDQhqA1CrivIflUa4NCGL9MmnOD1gol7XMLaC3QKAOCoDA25Bp2paVCRmW/+rSWfg+4VgK5Vmba0T7XMGsEaKOQSOPV45Rx0FagoCrQU6+GX9y7doPM2p4+Ms+LnUMMhDLIn0KIVbsipG0PZdILSGSJT6R9wpgabdAQ1q8Wowj6BBuKkECHjTXQoQjx42VfHwoI/EMCsYyj1Lvm5lGG6GuQQAf2gQ75yw/XdHd6ORL/x16fUIMYY1DJ3TnCGIJUsFCEBLJXp6NDGeKH704JgXkoQizlKNXuyGaZ37xEKEIC2SvT0aEICcODbEeyv0QJyhkapcEQVIrpayG89uJKSNI8YWrjUF81/YS5Ds80BOVoibymFpk28p1gHDlV0PcnBC3nO36+P1XXhqHxlW5LgjHIleQgfGWp2gcIoql8KRLidyGFmqtrS3ywiKkQBBvDcVTa136t9L6ZMQNH2rzEIU4LZL5o8WuAv+PKn7Z80YNMTLmiSIX2B3bVpD/psywDKf3JzdMKfWfRJNEplxIJVSA5CuorO+mZSZAUtZC0p4VFaeS0JyVaoThw6Q/Qyu9CVksFXEkUlAd6ypVFa8WuXRtkbSxrzSxw7Xe9ZjojmL3iVqNWcsr9UU4Y8KWO8fP4QtM226dWVjbzaKIDPfVayXZFtu3CItfa7xWksYLwcvutQlFJp5w3D4+A+01dc+BcNQdIwdEK0ZOSoCVWT3taovKbOucaOeWNBzRjwLmvFTQohsILL3yGB28KaRVwIZEoUNqXoBZ48+DKgLIoeeMBhtLvT80zhNZB/sCjmc8VFrgiaCQDzVFwyt9x7YsfBlqi4nbqg0Fz0Ao5036381FgQWuk2nPTBjXzmycqqdmUG4aayOYpGFcKeBO2wpc9hHIKXPkUyQI95ZL7cOmbvaNs8xCNEGMbunmeYP05wF5xvxk3Bm5+NtWTZKaxmK+2fAbWnvZ1E2GBbrSwWu3a/SHO8mYtKl/7Gp8EeHPiF1RNua/OmgdCDJl3rD9JWQHWIqPKH1gkCl/8SRRci6mPK0vaU6ciAri1SH1i1t5jakczNJLaaaBVV2twS3yAeg8bX4MfLsGvsuYvRsvjlx4HN47JuVtURwNmWbr5e1Kvmjcb+y+fnr4QKd2s3n+nc/AW5xPvYsI0h9IdynMxqm57efdeTl6MkvZ1Zftq8vLV7n1l32t38RnwoBbi9El0UPse+aujg2722D73FdFBn4kOag0a0UGthhEd9BtBB7Xgw5dBB7VzvXrGQBEd9GuwR0QHRXRQ/4nooIgOiuigiA6K6KAv0yiigyI6KKKDfmH3R3RQRAdFdFBEB0V0UEQHfXkURXRQRAdFdFBEB32xRBEdFNFBER30pfaL6KCIDorooIgOiuigT6ODTr68/iRIqGhH7cFLTnbuuj1BC+3m+MhXBAt9CiyUQ2fcgBfK3KKOoKFWwwga+o2Ahv7n/kqhz4ZNfRW00K8bNhVhQhEm1H8iTCjChCJMKMKEIkzoyzSKMKEIE4owoV/Y/REmFGFCESYUYUIRJhRhQl8eRREmFGFCESYUYUJfLFGECUWYUIQJfan9IkwowoQiTCjChCJM6OfAhPp3p78cSKguNnszfOQrQoQ+HyJUFxto/rhfBAi1GkaAUAQIRYDQbwYg9Hm/V+mrQoQ+//cqRZBQ84kgoQgS+qixI0gofCJIKIKEIkjo62sUQUIRJBRBQhEkFEFCESQUQUIRJBRBQhEkFEFCESQUQUIRJBRBQhEk9KX2iyChCBKKIKEIEoogoc//S2Pta2T4113xSYzQz/1rYzO3A3o89xXRQZ9CB3V/baw1aMQFtRpGXNBvBBf08n9tDP6Wu1cfNVJERv16cUHx763FX6QUMVIRIxUxUhEjdfiJGKmIkYoYqYiRihipiJGKGKmIkYoYqYiRihipiJGKGKmIkYoYqV/OIREjFTFSESMVMVIRIxUxUhEjFTFSvw2M1NPBe5iLi2pWppt6X4TRCKbJpt6WDpIsg/YNJjQvdKvmbeSmbF7hwtwtkm1Ww41bJbdpUeIhk/+TV7VL5mewSEsH9cpBO6y4dWVDdi+H4aZM50u3N3hezLZrl9eYzOf/y495l1a1y1355nUjxuszaN8iv4XJJTwemHVW5FUdhJ7AIs3n3zVEOwLrpFy6+u35q4NR6QLetGPeHvGDVmrslP5zq/ObYwaNxn8v3SYpHRSbOi3yChZFj1DCYuPyH8rsaFArbeg/eTI3QCvvuNOoEx/++Ed4/e/KZYvXZ37iHyrXdYSkrsv0Zls7KMreQ3UBTe8n3PNk7cbN+9ZOfVy6+rvA4s3rBtxWl8nsvZs3aLnXb/3cXd9V6RZn/vT49uyI84dT5vluPofSZXsi1kWve7qAtAZ3n1Z1dfw6t3cOli576iAITHwzTGDX9/xYrBNS/cVHZzIri6p6Pir958ibbw4M0Unx9nDWD3vUh8OwWWzzmR+yH6V5MXfHKt6t0sxB0wS//z34n+i//pqsHdbFD5uNK6dJ5d68hW8mE3j93eunRmoGT9qxPkjz+q/F3J17C/zz+n/DRXIJLnN+1VWwSm4dJJAVd66cJZVrwuSjSgGUrt6WecN7X/cPJ3Vtgq2qyzPIj6X0jq4fNq5YQFWXrS5VXab58oRC3aSvXx+b+5RoVV1i5vJlvYJLyOGPzY1qe9Nyf0MaYcb+7qEC4epidJgnL0Y3xfyhTbKrep1d/r8AAAD//85gTRWxxQAA";
 
       // Initialize Gist with config
       const config = getConfig();
@@ -153,6 +155,20 @@ <h4>Gist.setUserToken()</h4>
         );
       }
 
+      function showMultiStepMessage() {
+        Gist.showMessage(
+          {
+            messageId: 'html-multistep-message',
+            position: 'center',
+            properties: { 
+              gist: { 
+                encodedMessageHtml: EncodedTestMultiStepMessage
+              }
+            }
+          }
+        );
+      }
+
       function logIn() {
         Gist.setUserToken("ABC456");
       }
diff --git a/src/gist.js b/src/gist.js
index f30b1af..b999533 100644
--- a/src/gist.js
+++ b/src/gist.js
@@ -3,7 +3,8 @@ import { log } from "./utilities/log";
 import { clearExpiredFromLocalStore } from "./utilities/local-storage";
 import { startQueueListener, checkMessageQueue, stopSSEListener } from "./managers/queue-manager";
 import { setUserToken, clearUserToken, useGuestSession } from "./managers/user-manager";
-import { showMessage, embedMessage, hideMessage, removePersistentMessage, fetchMessageByInstanceId, logBroadcastDismissedLocally } from "./managers/message-manager";
+import { showMessage, embedMessage, hideMessage, removePersistentMessage, logBroadcastDismissedLocally } from "./managers/message-manager";
+import { fetchMessageByInstanceId } from "./utilities/message-utils";
 import { setUserLocale } from "./managers/locale-manager";
 import { setCustomAttribute, clearCustomAttributes, removeCustomAttribute } from "./managers/custom-attribute-manager";
 import { setupPreview } from "./utilities/preview-mode";
diff --git a/src/managers/message-component-manager.js b/src/managers/message-component-manager.js
index 6000c1f..68c8f01 100644
--- a/src/managers/message-component-manager.js
+++ b/src/managers/message-component-manager.js
@@ -4,9 +4,9 @@ import { resolveMessageProperties } from "./gist-properties-manager";
 import { embedHTMLTemplate } from "../templates/embed";
 import { messageHTMLTemplate } from "../templates/message";
 import { positions } from "./page-component-manager";
+import { wideOverlayPositions } from "../utilities/message-utils";
 
 const delay = ms => new Promise(res => setTimeout(res, ms));
-const wideOverlayPositions = ["x-gist-top", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];
 
 export function isElementLoaded(elementId) {
   var element = safelyFetchElement(elementId);
@@ -17,7 +17,7 @@ export function isElementLoaded(elementId) {
   }
 }
 
-export function loadEmbedComponent(elementId, url, message, options) {
+export function loadEmbedComponent(elementId, url, message, options, stepName = null) {
   var element = safelyFetchElement(elementId);
   if (element) {
     var messageElementId = getMessageElementId(message.instanceId);
@@ -35,7 +35,7 @@ export function loadEmbedComponent(elementId, url, message, options) {
       element.style.height = "0px";
     }
     element.innerHTML = embed(url, message, messageProperties);
-    attachIframeLoadEvent(messageElementId, options);
+    attachIframeLoadEvent(messageElementId, options, stepName);
   } else {
     log(`Message could not be embedded, elementId ${elementId} not found.`);
   }
@@ -52,7 +52,11 @@ export function hideEmbedComponent(elementId) {
   var element = safelyFetchElement(elementId);
   if (element) {
     element.classList.remove("gist-visible");
+    // Remove all gist-* classes (instanceId classes)
+    const classesToRemove = Array.from(element.classList).filter(cls => cls.startsWith('gist-'));
+    classesToRemove.forEach(cls => element.classList.remove(cls));
     element.style.removeProperty("height");
+    element.style.removeProperty("width");
     element.innerHTML = "";
   }
 }
@@ -85,24 +89,36 @@ export function resizeComponent(message, size) {
   }
 }
 
-export function loadOverlayComponent(url, message, options) {
+export function loadOverlayComponent(url, message, options, stepName = null) {
   document.body.insertAdjacentHTML('afterbegin', component(url, message));
-  attachIframeLoadEvent(getMessageElementId(message.instanceId), options);
+  attachIframeLoadEvent(getMessageElementId(message.instanceId), options, stepName);
 }
 
-function attachIframeLoadEvent(elementId, options) {
+function attachIframeLoadEvent(elementId, options, stepName = null) {
   const iframe = document.getElementById(elementId);
   if (iframe) {
       iframe.onload = function() {
-          sendOptionsToIframe(elementId, options); // Send the options when iframe loads
+          sendOptionsToIframe(elementId, options, stepName); // Send the options when iframe loads
       };
   }
 }
 
-function sendOptionsToIframe(iframeId, options) {
+// SDK capabilities that can be communicated to the renderer
+const SDK_CAPABILITIES = [
+  'MultiStepDisplayTypes'
+];
+
+export function sendOptionsToIframe(iframeId, options, stepName = null) {
   const iframe = document.getElementById(iframeId);
   if (iframe && iframe.contentWindow) {
-      iframe.contentWindow.postMessage({ options: options }, '*');
+      const message = { 
+        options: options,
+        capabilities: SDK_CAPABILITIES
+      };
+      if (stepName) {
+        options.stepId = stepName;
+      }
+      iframe.contentWindow.postMessage(message, '*');
   }
 }
 
diff --git a/src/managers/message-manager.js b/src/managers/message-manager.js
index d9d2d34..819a7b8 100644
--- a/src/managers/message-manager.js
+++ b/src/managers/message-manager.js
@@ -20,17 +20,31 @@ import { resolveMessageProperties } from "./gist-properties-manager";
 import { positions, addPageElement } from "./page-component-manager";
 import { getAllCustomAttributes } from "./custom-attribute-manager";
 import { checkMessageQueue } from "./queue-manager";
-import { isMessageBroadcast, markBroadcastAsSeen, markBroadcastAsDismissed } from './message-broadcast-manager';
-import { markUserQueueMessageAsSeen } from './message-user-queue-manager';
+import { isMessageBroadcast, markBroadcastAsSeen, markBroadcastAsDismissed, isShowAlwaysBroadcast } from './message-broadcast-manager';
+import { markUserQueueMessageAsSeen, saveMessageState, clearMessageState } from './message-user-queue-manager';
 import { setMessageLoaded } from './message-user-queue-manager';
+import { 
+  fetchMessageByInstanceId,
+  fetchMessageByElementId,
+  isQueueIdAlreadyShowing,
+  removeMessageByInstanceId,
+  updateMessageByInstanceId,
+  hasDisplayChanged,
+  applyDisplaySettings
+} from '../utilities/message-utils';
 
 export async function showMessage(message) {
   if (Gist.isDocumentVisible) {
+    if (isQueueIdAlreadyShowing(message.queueId)) {
+      log(`Message with queueId ${message.queueId} is already showing.`);
+      return null;
+    }
     if (Gist.overlayInstanceId) {
       log(`Message ${Gist.overlayInstanceId} already showing.`);
       return null;
     } else {
-      var properties = resolveMessageProperties(message)
+      var properties = resolveMessageProperties(message);
+      
       message.instanceId = uuidv4();
       message.overlay = true;
       message.firstLoad = true;
@@ -40,7 +54,9 @@ export async function showMessage(message) {
       Gist.overlayInstanceId = message.instanceId;
       Gist.currentMessages.push(message);
 
-      return loadMessageComponent(message);
+      // Use saved step if available (set by queue manager)
+      const savedStep = message.savedStepName || null;
+      return loadMessageComponent(message, null, savedStep);
     }
   } else {
     log("Document hidden, not showing message now.");
@@ -50,6 +66,11 @@ export async function showMessage(message) {
 
 export async function embedMessage(message, elementId) {
   if (Gist.isDocumentVisible) {
+    if (isQueueIdAlreadyShowing(message.queueId)) {
+      log(`Message with queueId ${message.queueId} is already showing.`);
+      return null;
+    }
+    
     message.instanceId = uuidv4();
     message.overlay = false;
     message.firstLoad = true;
@@ -59,7 +80,9 @@ export async function embedMessage(message, elementId) {
     message.renderStartTime = new Date().getTime();
     Gist.currentMessages.push(message);
 
-    return loadMessageComponent(message, elementId);
+    // Use saved step if available (set by queue manager)
+    const savedStep = message.savedStepName || null;
+    return loadMessageComponent(message, elementId, savedStep);
   } else {
     log("Document hidden, not showing message now.");
     return null;
@@ -87,6 +110,8 @@ export async function removePersistentMessage(message) {
       log(`Persistent message dismissed, logging view`);
       await logUserMessageViewLocally(message);
       await reportMessageView(message);
+      // Clear saved message state when persistent message is removed
+      await clearMessageState(message.queueId);
     }
   } else {
     log(`Message with instance id: ${message.instanceId} not found`);
@@ -114,7 +139,7 @@ async function resetOverlayState(hideFirst, message) {
   Gist.overlayInstanceId = null;
 }
 
-function loadMessageComponent(message, elementId = null) {
+function loadMessageComponent(message, elementId = null, stepName = null) {
   if (elementId && isElementLoaded(elementId)) {
     log(`Message ${message.messageId} already showing in element ${elementId}.`);
     return null;
@@ -130,21 +155,21 @@ function loadMessageComponent(message, elementId = null) {
     properties: message.properties,
     customAttributes: Object.fromEntries(getAllCustomAttributes())
   }
+  
   var url = `${settings.GIST_VIEW_ENDPOINT[Gist.config.env]}/index.html`
   window.addEventListener('message', handleGistEvents);
   window.addEventListener('touchstart', handleTouchStartEvents);
 
   if (elementId) {
     if (positions.includes(elementId)) { addPageElement(elementId); }
-    loadEmbedComponent(elementId, url, message, options);
+    loadEmbedComponent(elementId, url, message, options, stepName);
   } else {
-    loadOverlayComponent(url, message, options);
+    loadOverlayComponent(url, message, options, stepName);
   }
 
   return message;
 }
 
-
 async function reportMessageView(message) {
   log(`Message shown, logging view for: ${message.messageId}`);
   var response = {};
@@ -162,20 +187,6 @@ async function reportMessageView(message) {
   }
 }
 
-export function fetchMessageByInstanceId(instanceId) {
-  return Gist.currentMessages.find(message => message.instanceId === instanceId);
-}
-
-function removeMessageByInstanceId(instanceId) {
-  Gist.currentMessages = Gist.currentMessages.filter(message => message.instanceId !== instanceId)
-}
-
-function updateMessageByInstanceId(instanceId, message) {
-  removeMessageByInstanceId(instanceId);
-  Gist.currentMessages.push(message);
-}
-
-
 function handleTouchStartEvents() {
   // Added this to avoid errors in the console
 }
@@ -192,21 +203,27 @@ async function handleGistEvents(e) {
         log(`Engine render for message: ${currentMessage.messageId} timer elapsed in ${timeElapsed.toFixed(3)} seconds`);
         setMessageLoaded(currentMessage.queueId);
         currentMessage.currentRoute = e.data.gist.parameters.route;
-        if (currentMessage.firstLoad) {
+        
+        // Show component for first load or display change reload
+        if (currentMessage.firstLoad || currentMessage.isDisplayChange) {
           if (currentMessage.overlay) {
             showOverlayComponent(currentMessage);
           } else {
             showEmbedComponent(currentMessage.elementId);
           }
 
-          Gist.messageShown(currentMessage);
-          if (messageProperties.persistent) {
-            log(`Persistent message shown, skipping logging view`);
-          } else {
-            await reportMessageView(currentMessage);
+          // Only trigger events for actual first load, not display changes
+          if (currentMessage.firstLoad && !currentMessage.isDisplayChange) {
+            Gist.messageShown(currentMessage);
+            if (messageProperties.persistent) {
+              log(`Persistent message shown, skipping logging view`);
+            } else {
+              await reportMessageView(currentMessage);
+            }
           }
 
           currentMessage.firstLoad = false;
+          currentMessage.isDisplayChange = false;
         }
         updateMessageByInstanceId(currentInstanceId, currentMessage);
         break;
@@ -260,6 +277,28 @@ async function handleGistEvents(e) {
         
         break;
       }
+      case "changeMessageStep": {
+        var displaySettings = e.data.gist.parameters.displaySettings;
+        var messageStepName = e.data.gist.parameters.messageStepName;
+        
+        // Save message state (step + display settings) for persistent messages or show-always broadcasts
+        if (messageProperties.persistent || isShowAlwaysBroadcast(currentMessage)) {
+          await saveMessageState(currentMessage.queueId, messageStepName, displaySettings);
+        }
+        
+        if (displaySettings && hasDisplayChanged(currentMessage, displaySettings)) {
+          log(`Display settings changed, reloading message`);
+          // Hide visually without side effects
+          await hideMessageVisually(currentMessage);
+          
+          // Apply new display settings
+          applyDisplaySettings(currentMessage, displaySettings);
+          
+          // Re-show message with new settings
+          await reloadMessageWithNewDisplay(currentMessage, messageStepName);
+        }
+        break;
+      }
       case "routeChanged": {
         currentMessage.currentRoute = e.data.gist.parameters.route;
         currentMessage.renderStartTime = new Date().getTime();
@@ -297,6 +336,60 @@ async function handleGistEvents(e) {
   }
 }
 
+// Reload message with new display settings
+async function reloadMessageWithNewDisplay(message, stepName) {
+  // Mark as display change reload to show component when routeLoaded is received
+  // but without triggering messageShown event or logging view
+  message.isDisplayChange = true;
+  message.renderStartTime = new Date().getTime();
+
+  // Determine elementId based on display type
+  var elementId = message.elementId || null;
+
+  // If moving to an elementId position, check if there's already a message there and dismiss it
+  if (elementId) {
+    const existingMessage = fetchMessageByElementId(elementId);
+    if (existingMessage && existingMessage.instanceId !== message.instanceId) {
+      log(`Dismissing existing message at ${elementId} to make room for multi-step message`);
+      await hideMessage(existingMessage);
+    }
+  }
+  
+  // Update Gist.overlayInstanceId based on new display type
+  if (message.overlay) {
+    Gist.overlayInstanceId = message.instanceId;
+    // Set properties for overlay display
+    var properties = resolveMessageProperties(message);
+    message.shouldScale = properties.shouldScale;
+    message.shouldResizeHeight = true;
+  } else {
+    Gist.overlayInstanceId = null;
+    // Set properties for embedded display
+    message.shouldScale = false;
+    message.shouldResizeHeight = !elementHasHeight(elementId);
+  }
+  
+  // Add page element if it's an overlay position
+  if (elementId && positions.includes(elementId)) {
+    addPageElement(elementId);
+  }
+  
+  // Reload the message component with new settings
+  // Component will be shown when routeLoaded event is received
+  loadMessageComponent(message, elementId, stepName);
+}
+
+// Visual-only hide without side effects
+async function hideMessageVisually(message) {
+  if (message.overlay) {
+    await hideOverlayComponent();
+  } else {
+    hideEmbedComponent(message.elementId);
+  }
+  // Note: We don't call removeMessageByInstanceId or clear Gist.overlayInstanceId
+  // to keep the message in memory for re-rendering
+}
+
 async function logUserMessageViewLocally(message) {
   log(`Logging user message view locally for: ${message.queueId}`);
   if (isMessageBroadcast(message)) {
@@ -310,5 +403,7 @@ export async function logBroadcastDismissedLocally(message) {
   if (isMessageBroadcast(message)) {
     log(`Logging broadcast dismissed locally for: ${message.queueId}`);
     await markBroadcastAsDismissed(message.queueId);
+    // Clear saved message state when broadcast is dismissed
+    await clearMessageState(message.queueId);
   }
 }
diff --git a/src/managers/message-user-queue-manager.js b/src/managers/message-user-queue-manager.js
index 180b711..854caab 100644
--- a/src/managers/message-user-queue-manager.js
+++ b/src/managers/message-user-queue-manager.js
@@ -1,5 +1,6 @@
 import { getKeyFromLocalStore, setKeyToLocalStore, clearKeyFromLocalStore } from '../utilities/local-storage';
 import { getHashedUserToken } from './user-manager';
+import { log } from '../utilities/log';
 
 const messageQueueLocalStoreName = "gist.web.message.user";
 const messagesLocalStoreCacheInMinutes = 60;
@@ -77,4 +78,43 @@ async function getMessageLoadingStateLocalStoreName(queueId) {
   const userToken = await getHashedUserToken();
   if (!userToken) return null;
   return `${messageQueueLocalStoreName}.${userToken}.message.${queueId}.loading`
+}
+
+async function getMessageStateLocalStoreName(queueId) {
+  const userToken = await getHashedUserToken();
+  if (!userToken) return null;
+  return `${messageQueueLocalStoreName}.${userToken}.message.${queueId}.state`;
+}
+
+export async function saveMessageState(queueId, stepName, displaySettings) {
+  const messageStateLocalStoreName = await getMessageStateLocalStoreName(queueId);
+  if (!messageStateLocalStoreName) return;
+  
+  // Get existing state to merge with new values
+  const existingState = getKeyFromLocalStore(messageStateLocalStoreName) || {};
+  
+  const state = {
+    stepName: stepName !== undefined ? stepName : existingState.stepName,
+    displaySettings: displaySettings !== undefined ? displaySettings : existingState.displaySettings
+  };
+  
+  const expiryDate = new Date();
+  expiryDate.setDate(expiryDate.getDate() + 30); // 30-day TTL
+  setKeyToLocalStore(messageStateLocalStoreName, state, expiryDate);
+  log(`Saved message state for queueId: ${queueId}`, state);
+}
+
+export async function getSavedMessageState(queueId) {
+  const messageStateLocalStoreName = await getMessageStateLocalStoreName(queueId);
+  if (!messageStateLocalStoreName) return null;
+  
+  return getKeyFromLocalStore(messageStateLocalStoreName);
+}
+
+export async function clearMessageState(queueId) {
+  const messageStateLocalStoreName = await getMessageStateLocalStoreName(queueId);
+  if (!messageStateLocalStoreName) return;
+  
+  clearKeyFromLocalStore(messageStateLocalStoreName);
+  log(`Cleared message state for queueId: ${queueId}`);
 }
\ No newline at end of file
diff --git a/src/managers/page-component-manager.js b/src/managers/page-component-manager.js
index e528844..d281aff 100644
--- a/src/managers/page-component-manager.js
+++ b/src/managers/page-component-manager.js
@@ -3,6 +3,11 @@ import { log } from "../utilities/log";
 export var positions = ["x-gist-top", "x-gist-floating-top", "x-gist-bottom", "x-gist-floating-bottom", "x-gist-floating-bottom-left", "x-gist-floating-bottom-right", "x-gist-floating-top-left", "x-gist-floating-top-right"];
 
 export function addPageElement(position) {
+  // Check if element already exists
+  if (document.getElementById(position)) {
+    return;
+  }
+  
   const element = document.createElement("div");
   element.id = position
 
diff --git a/src/managers/queue-manager.js b/src/managers/queue-manager.js
index 532c497..cec2d6e 100644
--- a/src/managers/queue-manager.js
+++ b/src/managers/queue-manager.js
@@ -6,9 +6,10 @@ import { showMessage, embedMessage } from "./message-manager";
 import { resolveMessageProperties } from "./gist-properties-manager";
 import { clearKeyFromLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
 import { updateBroadcastsLocalStore, getEligibleBroadcasts, isShowAlwaysBroadcast } from './message-broadcast-manager';
-import { updateQueueLocalStore, getMessagesFromLocalStore, isMessageLoading, setMessageLoading } from './message-user-queue-manager';
+import { updateQueueLocalStore, getMessagesFromLocalStore, isMessageLoading, setMessageLoading, getSavedMessageState } from './message-user-queue-manager';
 import { updateInboxMessagesLocalStore } from './inbox-message-manager';
 import { settings } from '../services/settings';
+import { applyDisplaySettings } from '../utilities/message-utils';
 
 var sleep = time => new Promise(resolve => setTimeout(resolve, time))
 var poll = (promiseFn, time) => promiseFn().then(sleep(time).then(() => poll(promiseFn, time)));
@@ -61,6 +62,23 @@ async function handleMessage(message) {
     message.position = messageProperties.position;
   }
 
+  // Restore saved state for persistent messages or show-always broadcasts
+  if (messageProperties.persistent || isShowAlwaysBroadcast(message)) {
+    const savedState = await getSavedMessageState(message.queueId);
+    if (savedState) {
+      log(`Restoring saved state for queueId ${message.queueId}`);
+      
+      // Apply saved display settings if they exist
+      if (savedState.displaySettings) {
+        applyDisplaySettings(message, savedState.displaySettings);
+        messageProperties = resolveMessageProperties(message); // Re-resolve after applying
+      }
+      
+      // Store saved step for later use
+      message.savedStepName = savedState.stepName;
+    }
+  }
+
   // If the message is not persistant, is not a show always broadcast, and is already loading, we skip it.
   if (!messageProperties.persistent && !isShowAlwaysBroadcast(message) && await isMessageLoading(message.queueId)) {
     log(`Not showing message with queueId ${message.queueId} because its already loading.`);
diff --git a/src/utilities/local-storage.js b/src/utilities/local-storage.js
index 9aa4d83..ce3de61 100644
--- a/src/utilities/local-storage.js
+++ b/src/utilities/local-storage.js
@@ -65,7 +65,7 @@ function checkKeyForExpiry(key) {
         const expiryTime = new Date(item.expiry);
         
         // remove old cache entries with long expiry times
-        const isBroadcastOrUserKey = (key.startsWith("gist.web.message.broadcasts") && !key.endsWith("shouldShow") && !key.endsWith("numberOfTimesShown")) || (key.startsWith("gist.web.message.user") && !key.endsWith("seen"));
+        const isBroadcastOrUserKey = (key.startsWith("gist.web.message.broadcasts") && !key.endsWith("shouldShow") && !key.endsWith("numberOfTimesShown")) || (key.startsWith("gist.web.message.user") && !key.endsWith("seen") && !key.endsWith("state"));
         const sixtyMinutesFromNow = new Date(now.getTime() + 61 * 60 * 1000);
         if (isBroadcastOrUserKey && expiryTime.getTime() > sixtyMinutesFromNow.getTime()) {
             clearKeyFromLocalStore(key);
diff --git a/src/utilities/message-utils.js b/src/utilities/message-utils.js
new file mode 100644
index 0000000..d0d9433
--- /dev/null
+++ b/src/utilities/message-utils.js
@@ -0,0 +1,187 @@
+import Gist from '../gist';
+import { positions } from '../managers/page-component-manager';
+import { resolveMessageProperties } from '../managers/gist-properties-manager';
+import { log } from './log';
+
+export const wideOverlayPositions = ["x-gist-top", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];
+
+export function fetchMessageByInstanceId(instanceId) {
+  return Gist.currentMessages.find(message => message.instanceId === instanceId);
+}
+
+export function isQueueIdAlreadyShowing(queueId) {
+  if (!queueId) {
+    return false;
+  }
+  return Gist.currentMessages.some(message => message.queueId === queueId);
+}
+
+export function fetchMessageByElementId(elementId) {
+  if (!elementId) {
+    return null;
+  }
+  return Gist.currentMessages.find(message => message.elementId === elementId);
+}
+
+export function removeMessageByInstanceId(instanceId) {
+  Gist.currentMessages = Gist.currentMessages.filter(message => message.instanceId !== instanceId)
+}
+
+export function updateMessageByInstanceId(instanceId, message) {
+  removeMessageByInstanceId(instanceId);
+  Gist.currentMessages.push(message);
+}
+
+export function mapOverlayPositionToElementId(overlayPosition) {
+  const positionMap = {
+    "topLeft": "x-gist-floating-top-left",
+    "topCenter": "x-gist-floating-top",
+    "topRight": "x-gist-floating-top-right",
+    "bottomLeft": "x-gist-floating-bottom-left",
+    "bottomCenter": "x-gist-floating-bottom",
+    "bottomRight": "x-gist-floating-bottom-right"
+  };
+  
+  // Validate overlayPosition and provide fallback
+  if (!overlayPosition || !positionMap[overlayPosition]) {
+    log(`Invalid overlay position "${overlayPosition}", defaulting to "topCenter"`);
+    return positionMap["topCenter"];
+  }
+  
+  return positionMap[overlayPosition];
+}
+
+// Helper function to determine current display type
+export function getCurrentDisplayType(message) {
+  if (message.overlay) {
+    return "modal";
+  } else if (message.elementId && positions.includes(message.elementId)) {
+    return "overlay";
+  } else if (message.elementId) {
+    return "inline";
+  }
+  return "modal"; // default
+}
+
+// Helper function to check if display settings have changed
+export function hasDisplayChanged(currentMessage, displaySettings) {
+  const currentDisplayType = getCurrentDisplayType(currentMessage);
+  const newDisplayType = displaySettings.displayType;
+  
+  // If the new display type is undefined, we don't need to check if it has changed.
+  if (newDisplayType === undefined) {
+    return false;
+  }
+
+  // Check if display type changed
+  if (currentDisplayType !== newDisplayType) {
+    return true;
+  }
+  
+  // Check if other display settings changed using resolved properties
+  const resolvedProps = resolveMessageProperties(currentMessage);
+
+  // Check if position changed within the same display type
+  switch (newDisplayType) {
+    case "modal": {
+      const currentPosition = currentMessage.position || "center";
+      const newPosition = displaySettings.modalPosition || "center";
+      if (currentPosition !== newPosition) {
+        return true;
+      }
+
+      if (displaySettings.dismissOutsideClick !== undefined) {
+        if (resolvedProps.exitClick !== displaySettings.dismissOutsideClick) {
+          return true;
+        }
+      }
+      
+      if (displaySettings.overlayColor !== undefined) {
+        if (resolvedProps.overlayColor !== displaySettings.overlayColor) {
+          return true;
+        }
+      }
+      break;
+    }
+    case "overlay": {
+      const newElementId = mapOverlayPositionToElementId(displaySettings.overlayPosition);
+      if (currentMessage.elementId !== newElementId) {
+        return true;
+      }
+      break;
+    }
+    case "inline": {
+      if (currentMessage.elementId !== displaySettings.elementSelector) {
+        return true;
+      }
+      break;
+    }
+  }
+  
+  if (displaySettings.maxWidth !== undefined) {
+    if (resolvedProps.messageWidth !== displaySettings.maxWidth) {
+      return true;
+    }
+  }
+  
+  return false;
+}
+
+// Apply display settings to message
+export function applyDisplaySettings(message, displaySettings) {
+  // Ensure message.properties.gist exists
+  if (!message.properties) {
+    message.properties = {};
+  }
+  if (!message.properties.gist) {
+    message.properties.gist = {};
+  }
+  
+  // Apply display type specific settings
+  if (displaySettings.displayType === "modal") {
+    message.overlay = true; // Note: overlay property = true for modals
+    message.elementId = null;
+    message.properties.gist.elementId = null; // Also update in gist properties
+    message.position = displaySettings.modalPosition || "center";
+    message.properties.gist.position = displaySettings.modalPosition || "center";
+  } else if (displaySettings.displayType === "overlay") {
+    message.overlay = false;
+    const elementId = mapOverlayPositionToElementId(displaySettings.overlayPosition);
+    message.elementId = elementId;
+    message.properties.gist.elementId = elementId; // Also update in gist properties
+    message.position = null;
+    message.properties.gist.position = null;
+  } else if (displaySettings.displayType === "inline") {
+    message.overlay = false;
+    message.elementId = displaySettings.elementSelector;
+    message.properties.gist.elementId = displaySettings.elementSelector; // Also update in gist properties
+    message.position = null;
+    message.properties.gist.position = null;
+  }
+  
+  // Apply width settings - clear if not specified so defaults are used
+  // This is especially important for wide overlay positions (top/bottom) which should use 100% width
+  const isWideOverlayPosition = message.elementId && wideOverlayPositions.includes(message.elementId);
+  
+  // For wide overlay positions, ALWAYS clear custom width to ensure 100% width
+  if (isWideOverlayPosition) {
+    delete message.properties.gist.messageWidth;
+  } else if (displaySettings.maxWidth !== undefined && displaySettings.maxWidth > 0) {
+    message.properties.gist.messageWidth = displaySettings.maxWidth;
+  } else {
+    delete message.properties.gist.messageWidth;
+  }
+  
+  if (displaySettings.overlayColor !== undefined) {
+    message.properties.gist.overlayColor = displaySettings.overlayColor;
+  } else {
+    delete message.properties.gist.overlayColor;
+  }
+  
+  if (displaySettings.dismissOutsideClick !== undefined) {
+    message.properties.gist.exitClick = displaySettings.dismissOutsideClick;
+  } else {
+    delete message.properties.gist.exitClick;
+  }
+}
+