Layout published by 〨 ˒˒ yaumi ꜝꜝ ♡

published 1716355144
updated 1788570480

Add to Favorites

View Layouts

View Profile

Report Layout

customize the little texting popup

Tags: cute, cutecore, kawaii, pink, webcore, y2k, nostalgic, cuteweb, 2000s

Description:

♡ FREE INTERACTIVE TEXTING POPUP !! ♡

hiiii spacehey !! :3

I made this little Apple/iMessage-inspired texting popup for profiles and decided to make it FREE for anyone to use !!

it has:

♡ animated popup entrance

♡ profile picture + username

♡ online/status text

♡ multiple messages that appear one by one

♡ clickable reply button

♡ extra messages after the button is clicked

♡ customizable messages

♡ customizable button text

♡ NO BYF LINK NEEDED !!

I tried to make it as beginner-friendly as possible, so you don't have to understand CSS to customize it. I put little instructions directly inside the code telling you exactly what to change. ♡

PLEASE keep the tiny credit at the bottom if you use it !! It helps people find the original template and makes it easier for others to discover my stuff too.

feel free to customize it however you want — change the colors, messages, PFP, name, button, fonts, etc. !!

if you use it, I'd LOVE to see what your version looks like :3

♡ Need help? Dm Me! ♡

\made by Savi ♡

YOUR NAME online

YOUR "OKAY" MESSAGE HERE

now

YOUR RANDOM MESSAGE 1 HERE

now

YOUR RANDOM MESSAGE 2 HERE

now

YOUR RANDOM MESSAGE 3 HERE

now

YOUR RANDOM MESSAGE 4 HERE

now

YOUR RANDOM MESSAGE 5 HERE

now

YOUR RANDOM MESSAGE 6 HERE

now

YOUR RANDOM MESSAGE 7 HERE

now

YOUR FIRST MESSAGE HERE

now

YOUR SECOND MESSAGE HERE

now

YOUR THIRD MESSAGE HERE

now

YOUR FOURTH MESSAGE HERE

now

YOUR FIFTH MESSAGE HERE

now

YOUR FINAL MESSAGE HERE

now

YOUR BUTTON TEXT

texting template by Savi

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 〨 ˒˒ yaumi ꜝꜝ ♡ (https://layouts.spacehey.com/layout?id=106137) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');





/* =========================================================

   ♡ APPLE-STYLE TEXTING POPUP TEMPLATE ♡



   Everything is already put together!



   YOU ONLY NEED TO CHANGE:



   YOUR NAME

   YOUR PFP URL HERE

   YOUR MESSAGE HERE

   YOUR BUTTON TEXT



   You do NOT need a BYF link.



   You can make the "okay" message say ANYTHING you want!

   ========================================================= */





/* =========================================================

   MAIN CHAT WINDOW

   ========================================================= */



.text-popup {



  position: fixed;



  right: 20px;

  bottom: 20px;



  width: 295px;

  height: 420px;



  box-sizing: border-box;



  background: #f9f9fb;



  border: 1px solid #d1d1d6;



  border-radius: 14px;



  box-shadow:

    0 5px 25px rgba(0,0,0,.18);



  font-family:

    'Balsamiq Sans',

    Arial,

    sans-serif;



  z-index: 99998;



  overflow: hidden;



  opacity: 0;



  transform:

    translateY(20px)

    scale(.97);



  animation:

    popupAppear

    .6s ease-out

    2s forwards;

}





/* =========================================================

   HEADER

   ========================================================= */



.text-header {



  height: 42px;



  display: flex;



  align-items: center;



  gap: 8px;



  padding:

    7px 10px;



  box-sizing: border-box;



  background: #ffffff;



  border-bottom:

    1px solid #d1d1d6;

}





/* =========================================================

   PFP

   ========================================================= */



.text-pfp {



  width: 27px;

  height: 27px;



  border-radius: 50%;



  object-fit: cover;



  border:

    1px solid #d1d1d6;



  background: #e5e5ea;



  flex-shrink: 0;

}





/* =========================================================

   NAME

   ========================================================= */



.text-name {



  color: #007aff;



  font-size: 10px;



  font-weight: bold;

}





/* =========================================================

   ONLINE TEXT

   ========================================================= */



.text-online {



  margin-left: auto;



  color: #8e8e93;



  font-size: 8px;

}





/* =========================================================

   CHAT AREA

   ========================================================= */



.text-chat {



  height: 300px;



  overflow-y: auto;



  overflow-x: hidden;



  padding:

    10px 8px 5px;



  display: flex;



  flex-direction: column;



  gap: 7px;



  box-sizing: border-box;



  scrollbar-width: thin;



  scrollbar-color:

    #c7c7cc

    transparent;

}





/* =========================================================

   MESSAGE

   ========================================================= */



.text-message {



  display: flex;



  align-items: flex-end;



  gap: 5px;



  opacity: 0;



  transform:

    translateY(7px);



  flex-shrink: 0;

}





/* =========================================================

   INCOMING MESSAGE BUBBLE

   ========================================================= */



.text-bubble {



  max-width: 205px;



  padding:

    7px 10px;



  background: #e5e5ea;



  border-radius:

    15px 15px 15px 4px;



  color: #000000;



  font-size: 10px;



  line-height: 1.4;



  text-align: left;



  word-wrap: break-word;

}





/* =========================================================

   MESSAGE TIME

   ========================================================= */



.text-time {



  font-size: 7px;



  color: #8e8e93;



  white-space: nowrap;

}





/* =========================================================

   USER / BLUE MESSAGE

   ========================================================= */



.text-user-message {



  justify-content: flex-end;

}





.text-user-bubble {



  max-width: 150px;



  padding:

    7px 10px;



  background: #007aff;



  border-radius:

    15px 15px 4px 15px;



  color: #ffffff;



  font-size: 10px;



  line-height: 1.4;



  word-wrap: break-word;

}





/* =========================================================

   BUTTON AREA

   ========================================================= */



.text-buttons {



  height: 38px;



  display: flex;



  justify-content: flex-end;



  align-items: center;



  gap: 5px;



  padding:

    0 9px;



  box-sizing: border-box;



  background: #ffffff;



  border-top:

    1px solid #d1d1d6;



  opacity: 0;



  animation:

    buttonAppear

    .5s ease-out

    18s forwards;

}





/* =========================================================

   BUTTON

   ========================================================= */



.text-button {



  display: inline-block;



  padding:

    5px 9px;



  border-radius: 12px;



  background: #ffffff;



  border:

    1px solid #007aff;



  color: #007aff !important;



  font-size: 8px;



  font-family:

    'Balsamiq Sans',

    Arial,

    sans-serif;



  text-decoration:

    none !important;



  cursor: pointer;



  transition:

    background .15s,

    color .15s;

}





.text-button:hover {



  background: #007aff;



  color: #ffffff !important;

}





/* =========================================================

   AFTER CLICKING THE BUTTON

   ========================================================= */



#text-replies {



  display: none;

}





#text-replies:target {



  display: block;

}





#text-replies:target

~ .text-initial {



  display: none;

}





/* =========================================================

   AFTER-CLICK CHAT

   ========================================================= */



.reply-chat {



  height: 334px;



  overflow-y: auto;



  overflow-x: hidden;



  padding:

    10px 8px;



  box-sizing: border-box;



  display: flex;



  flex-direction: column;



  gap: 7px;



  scrollbar-width: thin;



  scrollbar-color:

    #c7c7cc

    transparent;

}





/* =========================================================

   RANDOM MESSAGE TIMING

   ========================================================= */



#text-replies:target .user-ok {

  animation:

    messageAppear

    .45s ease-out

    .3s forwards;

}





#text-replies:target .random-1 {

  animation:

    messageAppear

    .45s ease-out

    2s forwards;

}





#text-replies:target .random-2 {

  animation:

    messageAppear

    .45s ease-out

    4s forwards;

}





#text-replies:target .random-3 {

  animation:

    messageAppear

    .45s ease-out

    6s forwards;

}





#text-replies:target .random-4 {

  animation:

    messageAppear

    .45s ease-out

    8s forwards;

}





#text-replies:target .random-5 {

  animation:

    messageAppear

    .45s ease-out

    10s forwards;

}





#text-replies:target .random-6 {

  animation:

    messageAppear

    .45s ease-out

    12s forwards;

}





#text-replies:target .random-7 {

  animation:

    messageAppear

    .45s ease-out

    14s forwards;

}





/* =========================================================

   ANIMATIONS

   ========================================================= */



@keyframes popupAppear {



  from {



    opacity: 0;



    transform:

      translateY(20px)

      scale(.97);



  }



  to {



    opacity: 1;



    transform:

      translateY(0)

      scale(1);



  }



}





@keyframes messageAppear {



  from {



    opacity: 0;



    transform:

      translateY(7px);



  }



  to {



    opacity: 1;



    transform:

      translateY(0);



  }



}





@keyframes buttonAppear {



  from {



    opacity: 0;



  }



  to {



    opacity: 1;



  }



}

</style>





<!-- =======================================================

     ♡ TEXTING POPUP

     ======================================================= -->



<div class="text-popup">





  <!-- =====================================================

       HEADER

       ===================================================== -->



  <div class="text-header">





    <!--

      PUT YOUR PFP IMAGE LINK HERE

    -->



    <img class="text-pfp" src="YOURPFPURLHERE" alt="YOUR NAME"/>





    <!--

      PUT YOUR NAME HERE

    -->



    <span class="text-name">

      YOUR NAME

    </span>





    <!--

      CHANGE THIS TO WHATEVER YOU WANT!

      Examples:

      online

      active now

      typing...

      awake

      etc.

    -->



    <span class="text-online">

      online

    </span>





  </div>







  <!-- =====================================================

       AFTER CLICKING THE BUTTON

       ===================================================== -->



  <div id="text-replies">





    <div class="reply-chat">





      <!-- =================================================

           THE VISITOR'S BLUE MESSAGE



           YOU CAN MAKE THIS SAY WHATEVER YOU WANT!



           Examples:



           okay!!



           hiiii



           sure :3



           leave me alone



           omg hi



           etc.

           ================================================= -->



      <div class="text-message text-user-message user-ok">



        <div class="text-user-bubble">



          YOUR "OKAY" MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 1

           ================================================= -->



      <div class="text-message random-1">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 1 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 2

           ================================================= -->



      <div class="text-message random-2">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 2 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 3

           ================================================= -->



      <div class="text-message random-3">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 3 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 4

           ================================================= -->



      <div class="text-message random-4">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 4 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 5

           ================================================= -->



      <div class="text-message random-5">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 5 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 6

           ================================================= -->



      <div class="text-message random-6">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 6 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           RANDOM MESSAGE 7

           ================================================= -->



      <div class="text-message random-7">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR RANDOM MESSAGE 7 HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>





    </div>



  </div>







  <!-- =====================================================

       INITIAL MESSAGES

       ===================================================== -->



  <div class="text-initial">





    <div class="text-chat">





      <!-- =================================================

           MESSAGE 1

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          3s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR FIRST MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           MESSAGE 2

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          5.5s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR SECOND MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           MESSAGE 3

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          8s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR THIRD MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           MESSAGE 4

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          10.5s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR FOURTH MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           MESSAGE 5

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          13s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR FIFTH MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>







      <!-- =================================================

           FINAL MESSAGE

           ================================================= -->



      <div class="text-message" style="&#10;&#10;          animation:&#10;&#10;          messageAppear&#10;&#10;          .5s ease-out&#10;&#10;          15.5s forwards;&#10;&#10;        ">



        <img class="text-pfp" src="YOURPFPURLHERE" alt=""/>



        <div class="text-bubble">



          YOUR FINAL MESSAGE HERE



        </div>



        <span class="text-time">

          now

        </span>



      </div>





    </div>







    <!-- ===================================================

         BUTTON

         =================================================== -->



    <div class="text-buttons">





      <!--

        CHANGE THE TEXT INSIDE THIS BUTTON

        TO WHATEVER YOU WANT.



        It does NOT have to say "okay".

      -->



      <a href="#text-replies" class="text-button">



        YOUR BUTTON TEXT



      </a>





    </div>



  </div>







  <!-- =====================================================

       ♡ SMALL CREDIT



       PLEASE KEEP THIS CREDIT WHEN USING THE TEMPLATE.

       ===================================================== -->



  <div style="&#10;&#10;      position:absolute;&#10;&#10;      bottom:2px;&#10;&#10;      left:0;&#10;&#10;      width:100%;&#10;&#10;      text-align:center;&#10;&#10;      font-size:6px;&#10;&#10;      line-height:8px;&#10;&#10;      color:#8e8e93;&#10;&#10;      pointer-events:auto;&#10;&#10;    ">



    texting template by

    <a href="https://spacehey.com/yaumiila" target="_blank" style="&#10;&#10;        color:#8e8e93;&#10;&#10;        text-decoration:none;&#10;&#10;      ">

      Savi

    </a>



  </div>





</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 652 comments ( View all | Add Comment )

norxano	1792335495 USINGGG #yumemaxxing Report Comment
shakabrah932	1791711830 using! this is so frickin cute :-) Report Comment
✮⋆♪Lili-chan♫⋆✮	1790568502 Using! this is very cute Report Comment
maxxime !	1790468206 using!!1 Report Comment
miukat	1790441735 Using!! Report Comment
Ren.Sanxez	1790393049 Usingg!! Report Comment
echo	1789587855 using Report Comment
Sleepy Legos	1789248651 Using! c: Report Comment
𝕁υׁℓιeт☮ʝɑׁׅcкթօt	1789109941 This is soo sick! Will consider using 💖 Report Comment
toffee8	1788407469 using!;3 Report Comment
꧁•⊹٭Angel04Ch1k٭⊹•꧂	1788174675 Using! Report Comment
. 𝗷ᦞꭎ. ⸸	1787984470 Using Ꮚ⁠˘⁠ ⁠ꈊ⁠ ⁠˘⁠ ⁠Ꮚ Report Comment
Thecraz333	1787679495 using :) Report Comment
isto	1787643302 using Report Comment
ᨳ𐔌՞҂ ˕ ֊՞𐦯ᜊ	1787246123 using ! :3 Report Comment
Yash ૮ ᴗ͈ ˕ ✙╿ྀི꒱	1787197490 Using Report Comment
vy	1786752102 using Report Comment
˚₊‧ ꒰ა 𝐸𝑚𝑚𝑎 ໒꒱ ‧₊˚	1786631820 Using!<3 Report Comment
moonshine flora	1786590657 usingg!! Report Comment
rxthii.hehe	1786146869 Using Report Comment