# How to add a boockup code to your website

**URL:** <https://forum.readymag.com/t/how-to-add-a-boockup-code-to-your-website/675>\
**Category:** Custom code\
**Created:** [September 13, 2022, 7:34am UTC](https://forum.readymag.com/t/how-to-add-a-boockup-code-to-your-website/675 "2022-09-13T07:34:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ninetales](https://avatars.discourse-cdn.com/v4/letter/n/65b543/32.png) [@ninetales](https://forum.readymag.com/u/ninetales)\
**Post date:** [September 13, 2022, 7:34am UTC](https://forum.readymag.com/t/how-to-add-a-boockup-code-to-your-website/675/1 "2022-09-13T07:34:42Z")

</div>

Hi! I created a rotating animation of our magazine via [https://boockup.marco.land/](https://boockup.marco.land/) and pasted in the widget custom code section while using correct urls of the images for front, back, etc. but it doesn’t work out, the code is just shown as text in preview mode. can anyone help?

that’s the code btw:

> Blockquote

/\* Created with [http://boockup.marco.land](http://boockup.marco.land) \*/  
@-webkit-keyframes rotatingAnimationX {  
0%{  
-webkit-transform: rotateX(0deg);  
transform: rotateX(0deg);  
}  
100% {  
-webkit-transform: rotateX(360deg);  
transform: rotateX(360deg);  
}  
}  
@keyframes rotatingAnimationX {  
0%{  
-webkit-transform: rotateX(0deg);  
transform: rotateX(0deg);  
}  
100% {  
-webkit-transform: rotateX(360deg);  
transform: rotateX(360deg);  
}  
}  
@-webkit-keyframes rotatingAnimationY {  
0%{  
-webkit-transform: rotateY(0deg);  
transform: rotateY(0deg);  
}  
100% {  
-webkit-transform: rotateY(360deg);  
transform: rotateY(360deg);  
}  
}  
@keyframes rotatingAnimationY {  
0%{  
-webkit-transform: rotateY(0deg);  
transform: rotateY(0deg);  
}  
100% {  
-webkit-transform: rotateY(360deg);  
transform: rotateY(360deg);  
}  
}  
@-webkit-keyframes rotatingAnimationZ {  
0%{  
-webkit-transform: rotateZ(0deg);  
transform: rotateZ(0deg);  
}  
100% {  
-webkit-transform: rotateZ(360deg);  
transform: rotateZ(360deg);  
}  
}  
@keyframes rotatingAnimationZ {  
0%{  
-webkit-transform: rotateZ(0deg);  
transform: rotateZ(0deg);  
}  
100% {  
-webkit-transform: rotateZ(360deg);  
transform: rotateZ(360deg);  
}  
}  
html, body {  
margin: 0;  
padding: 0;  
background-color: rgba(233, 237, 255, 1);  
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;  
color: #4a4a4a;  
text-transform: uppercase;  
font-size: 10px;  
text-align: center;  
letter-spacing: .1em;  
}  
a {  
color: inherit;  
text-decoration: none;  
}  
.container {  
width: 100vw;  
height: 100vh;  
overflow: hidden;  
-webkit-perspective: 1200px;  
perspective: 1200px;  
display: -webkit-box;  
display: -ms-flexbox;  
display: flex;  
-webkit-box-pack: center;  
-ms-flex-pack: center;  
justify-content: center;  
-webkit-box-align: center;  
-ms-flex-align: center;  
align-items: center;  
}  
.container \> div {  
-webkit-transform-style: preserve-3d;  
transform-style: preserve-3d;  
}  
.boockup {  
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  
}  
.book-container {  
-webkit-transform-style: preserve-3d;  
transform-style: preserve-3d;  
-webkit-animation: 10s rotatingAnimationY linear infinite;  
animation: 10s rotatingAnimationY linear infinite;  
}  
.book-container \> div {  
position: absolute;  
top: 0;  
left: 0;  
background-size: cover;  
background-position: center center;  
-webkit-backface-visibility: visible;  
backface-visibility: visible;  
}  
.book-top, .book-bottom, .book-side-right {  
background-size: auto auto;  
background-repeat: repeat;  
background-position: top left;  
}  
.book-front {  
background-image: url(‘[book-cover hosted at ImgBB — ImgBB](https://ibb.co/j31Qj3Z)’);  
width: 270px;  
height: 432px;  
-webkit-transform: translate3d(-135px ,-216px ,10px) translate3d(0,0,0) rotateY(0deg);  
transform: translate3d(-135px ,-216px ,10px) translate3d(0,0,0) rotateY(0deg);  
}  
.book-side-left {  
background-image: url(‘[book-spine hosted at ImgBB — ImgBB](https://ibb.co/JyqWwmm)’);  
width: 20px;  
height: 432px;  
-webkit-transform: translate3d(-135px ,-216px ,10px) translate3d(-10px, 0, -10px) rotateY(-90deg);  
transform: translate3d(-135px ,-216px ,10px) translate3d(-10px, 0, -10px) rotateY(-90deg);  
}  
.book-side-right {  
background-image: url(‘[book-side hosted at ImgBB — ImgBB](https://ibb.co/313sgFG)’);  
width: 20px;  
height: 432px;  
-webkit-transform: translate3d(-135px ,-216px ,10px) translate3d(260px, 0px,-10px) rotateY(90deg);  
transform: translate3d(-135px ,-216px ,10px) translate3d(260px, 0px,-10px) rotateY(90deg);  
}  
.book-top {  
background-image: url(‘[book-top hosted at ImgBB — ImgBB](https://ibb.co/JjB0STP)’);  
background-position: bottom right;  
width: 270px;  
height: 20px;  
-webkit-transform: translate3d(-135px, -216px ,10px) translate3d(0px, -10px, -10px) rotateX(90deg);  
transform: translate3d(-135px, -216px ,10px) translate3d(0px, -10px, -10px) rotateX(90deg);  
}  
.book-bottom {  
background-image: url(‘…/images/book-top.jpg’);  
width: 270px;  
height: 20px;  
-webkit-transform: translate3d(-135px ,-216px ,10px) translate3d(0px, 422px, -10px) rotateX(-90deg);  
transform: translate3d(-135px ,-216px ,10px) translate3d(0px, 422px, -10px) rotateX(-90deg);  
}  
.book-back {  
background-image: url(‘[book-back hosted at ImgBB — ImgBB](https://ibb.co/ZmdQsQZ)’);  
width: 270px;  
height: 432px;  
-webkit-transform: translate3d(-135px ,-216px ,10px) translate3d(0,0, -20px) rotateY(180deg);  
transform: translate3d(-135px ,-216px ,10px) translate3d(0,0, -20px) rotateY(180deg);  
}  
#credit {  
position: fixed;  
bottom: 1em;  
right: 1em;  
z-index: 99;  
background-color: #fff;  
border-radius: 8px;  
box-sizing: border-box;  
padding: .3rem 1rem;  
width: 21rem;  
height: 20px;  
-webkit-transition: background .2s;  
transition: background .2s;  
}  
#credit:hover {  
background-color: #d8d8d8;  
}

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [September 13, 2022, 9:11am UTC](https://forum.readymag.com/t/how-to-add-a-boockup-code-to-your-website/675/2 "2022-09-13T09:11:06Z")

</div>

Hey,

The code you have posted doesn´t include the hmtl part it needs. Its quite simple, but you have to create all the containers by yourself.

I ended up creating a customcodewidget with the following code included and the “use as iframe” enabled.:  
(I also added a “scale” value to the “.container \> div {}” to change the size of the bookobject.)

```auto
<div class="container">
  <div class="bookup">
<div class="book-container">
  <div class="book-front"></div>
  <div class="book-side-left"></div>
<div class="book-side-right"></div>
<div class="book-top"></div>
<div class="book-bottom"></div>
<div class="book-back"></div>
  </div>
  </div>
</div>

<style>
  
/* Created with http://boockup.marco.land */
@-webkit-keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
html, body {
  margin: 0;
  padding: 0;
  background-color: rgba(0, 114, 255, 1);
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  color: #4a4a4a;
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  letter-spacing: .1em;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.container > div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
transform: scale(0.5);
-webkit-transform: scale(0.5);

}
.boockup {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

}
.book-container {
  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: 10s rotatingAnimationY linear infinite;
  animation: 10s rotatingAnimationY linear infinite;
}
.book-container > div {

  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.book-top, .book-bottom, .book-side-right {
  background-size: auto auto;
  background-repeat: repeat;
  background-position: top left;
}
.book-front {
  background-image: url('https://boockup.marco.land/static/images/book-cover.jpg');
  width: 400px;
  height: 540px;
  -webkit-transform: translate3d(-200px ,-270px ,29px) translate3d(0,0,0) rotateY(0deg);
  transform: translate3d(-200px ,-270px ,29px) translate3d(0,0,0) rotateY(0deg);
}
.book-side-left {
  background-image: url('https://boockup.marco.land/static/images/book-spine.jpg');
  width: 58px;
  height: 540px;
  -webkit-transform: translate3d(-200px ,-270px ,29px) translate3d(-29px, 0, -29px) rotateY(-90deg);
  transform: translate3d(-200px ,-270px ,29px) translate3d(-29px, 0, -29px) rotateY(-90deg);
}
.book-side-right {
  background-image: url('https://boockup.marco.land/static/images/book-side.jpg');
  width: 58px;
  height: 540px;
  -webkit-transform: translate3d(-200px ,-270px ,29px) translate3d(371px, 0px,-29px) rotateY(90deg);
  transform: translate3d(-200px ,-270px ,29px) translate3d(371px, 0px,-29px) rotateY(90deg);
}
.book-top {
  background-image: url('https://boockup.marco.land/static/images/book-top.jpg');
  background-position: bottom right;
  width: 400px;
  height: 58px;
  -webkit-transform: translate3d(-200px, -270px ,29px) translate3d(0px, -29px, -29px) rotateX(90deg);
  transform: translate3d(-200px, -270px ,29px) translate3d(0px, -29px, -29px) rotateX(90deg);
}
.book-bottom {
  background-image: url('https://boockup.marco.land/static/images/book-top.jpg');
  width: 400px;
  height: 58px;
  -webkit-transform: translate3d(-200px ,-270px ,29px) translate3d(0px, 511px, -29px) rotateX(-90deg);
  transform: translate3d(-200px ,-270px ,29px) translate3d(0px, 511px, -29px) rotateX(-90deg);
}
.book-back {
  background-image: url('https://boockup.marco.land/static/images/book-back.jpg');
  width: 400px;
  height: 540px;
  -webkit-transform: translate3d(-200px ,-270px ,29px) translate3d(0,0, -58px) rotateY(180deg);
  transform: translate3d(-200px ,-270px ,29px) translate3d(0,0, -58px) rotateY(180deg);
}
#credit {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 99;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: .3rem 1rem;
  width: 21rem;
  height: 20px;
  -webkit-transition: background .2s;
  transition: background .2s;
}
#credit:hover {
  background-color: #d8d8d8;
}
      
  
</style>

```

---

<div class="post-metadata">

**Author:** ![ninetales](https://avatars.discourse-cdn.com/v4/letter/n/65b543/32.png) [@ninetales](https://forum.readymag.com/u/ninetales)\
**Post date:** [September 13, 2022, 11:05am UTC](https://forum.readymag.com/t/how-to-add-a-boockup-code-to-your-website/675/3 "2022-09-13T11:05:25Z")

</div>

wow, that’s amazing!!! it works now. thank you so, so much.