Forum:
♡ texting popup code — how to use! ♡
made by Savi / Yaumiila ( Me)
A little fake-texting popup for your SpaceHey profile! Everything is already put together, so you do not need to assemble different pieces of code yourself. Just copy the entire code below and paste it where you want to use it.
♡ before you use it!
RULES
1. Please keep the credit.
The tiny “texting template by Savi” credit at the bottom needs to stay. You can customize the rest of the popup however you want!
2. You can completely change the messages.
Change the name, PFP, messages, button text, colors, personality, etc. It's yours to customize.
3. Don't repost the exact template and claim you made the original code.
You're absolutely allowed to share the template with friends or tell people where you got it, though!
4. Don't remove the Savi credit and then redistribute the template as your own.
5. Don't sell this code.
It's meant to be a free SpaceHey profile decoration.
♡ THE CODE :
<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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="YOUR PFP URL HERE"
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="
animation:
messageAppear
.5s ease-out
3s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
alt=""
>
<div class="text-bubble">
YOUR FIRST MESSAGE HERE
</div>
<span class="text-time">
now
</span>
</div>
<!-- =================================================
MESSAGE 2
================================================= -->
<div
class="text-message"
style="
animation:
messageAppear
.5s ease-out
5.5s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
alt=""
>
<div class="text-bubble">
YOUR SECOND MESSAGE HERE
</div>
<span class="text-time">
now
</span>
</div>
<!-- =================================================
MESSAGE 3
================================================= -->
<div
class="text-message"
style="
animation:
messageAppear
.5s ease-out
8s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
alt=""
>
<div class="text-bubble">
YOUR THIRD MESSAGE HERE
</div>
<span class="text-time">
now
</span>
</div>
<!-- =================================================
MESSAGE 4
================================================= -->
<div
class="text-message"
style="
animation:
messageAppear
.5s ease-out
10.5s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
alt=""
>
<div class="text-bubble">
YOUR FOURTH MESSAGE HERE
</div>
<span class="text-time">
now
</span>
</div>
<!-- =================================================
MESSAGE 5
================================================= -->
<div
class="text-message"
style="
animation:
messageAppear
.5s ease-out
13s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
alt=""
>
<div class="text-bubble">
YOUR FIFTH MESSAGE HERE
</div>
<span class="text-time">
now
</span>
</div>
<!-- =================================================
FINAL MESSAGE
================================================= -->
<div
class="text-message"
style="
animation:
messageAppear
.5s ease-out
15.5s forwards;
"
>
<img
class="text-pfp"
src="YOUR PFP URL HERE"
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="
position:absolute;
bottom:2px;
left:0;
width:100%;
text-align:center;
font-size:6px;
line-height:8px;
color:#8e8e93;
pointer-events:auto;
"
>
texting template by
<a
href="https://spacehey.com/yaumiila"
target="_blank"
style="
color:#8e8e93;
text-decoration:none;
"
>
Savi
</a>
</div>
</div>
Report Topic
Permalink