While disabling some aspects of the referral journey is technically possible, generally speaking, we would not advise doing this. Changing certain elements of the journey can adversely affect the performance of the campaign, in some instances, we have seen conversion drop by more than half.
In our experience, we have found that the overlay is between two and five times better than an embedded offer.
Don't hesitate to contact us for a chat to discuss these changes if needed.
Here's a guide on how to make different amends to your journey:
Turning off the corner peel across ALL campaigns at the same time:
1- Go to Settings --> Edit brand --> Journey --> Untick the box:
Changing the position of your Corner Peel
Currently, you are only able to change the position of the corner peel on a merchant-wide basis.
1-Go to Setting > Onsite content
2-Click on the Corner Peel or Post Purchase Referrer Tab and edit the injection named “Stylesheet to alter how any of our injected content appears”
3. With the below code depending on your desired position.
Bottom-right
It is bottom-right by default.
Bottom-Left
1.mm-overlay-fixed {
2 bottom: 0px;
3 left: 0px;
4 top: initial;
5 right: initial;
6}
7
8.mm-frame-overlay {
9 border-bottom: initial;
10 border-left: initial;
11 border-top: 1px solid;
12 border-right: 1px solid;
13 border-radius: 0 10px 0 0;
14}
15
16/** If you want to overwrite animation so it goes from bottom-left out instead **/
17.mm-overlay-fixed-in {
18 animation: mm_overlay_appear_from_left 0.6s forwards;
19 -webkit-animation: mm_overlay_appear_from_left 0.6s forwards;
20 -moz-animation: mm_overlay_appear_from_left 0.6s forwards;
21 -o-animation: mm_overlay_appear_from_left 0.6s forwards;
22}
23
24.mm-overlay-fixed-out {
25 animation: mm_overlay_vanish_to_left 0.6s forwards;
26 -webkit-animation: mm_overlay_vanish_to_left 0.6s forwards;
27 -moz-animation: mm_overlay_vanish_to_left 0.6s forwards;
28 -o-animation: mm_overlay_vanish_to_left 0.6s forwards;
29}
30
31@keyframes mm_overlay_appear_from_left {
32 0% {
33 -ms-transform: translate(-100px, 100px); /* IE 9 */
34 -webkit-transform: translate(-100px, 100px); /* Safari */
35 transform: translate(-100px, 100px);
36 }
37 100% {
38 }
39}
40
41@-webkit-keyframes mm_overlay_appear_from_left {
42 0% {
43 -ms-transform: translate(-100px, 100px); /* IE 9 */
44 -webkit-transform: translate(-100px, 100px); /* Safari */
45 transform: translate(-100px, 100px);
46 }
47 100% {
48 }
49}
50
51@-moz-keyframes mm_overlay_appear_from_left {
52 0% {
53 -ms-transform: translate(-100px, 100px); /* IE 9 */
54 -webkit-transform: translate(-100px, 100px); /* Safari */
55 transform: translate(-100px, 100px);
56 }
57 100% {
58 }
59}
60
61@-o-keyframes mm_overlay_appear_from_left {
62 0% {
63 -ms-transform: translate(-100px, 100px); /* IE 9 */
64 -webkit-transform: translate(-100px, 100px); /* Safari */
65 transform: translate(-100px, 100px);
66 }
67 100% {
68 }
69}
70
71@keyframes mm_overlay_vanish_to_left {
72 0% {
73 }
74 100% {
75 -ms-transform: translate(-100px, 150px); /* IE 9 */
76 -webkit-transform: translate(-100px, 150px); /* Safari */
77 transform: translate(-100px, 150px);
78 }
79}
80
81@-webkit-keyframes mm_overlay_vanish_to_left {
82 0% {
83 }
84 100% {
85 -ms-transform: translate(-100px, 150px); /* IE 9 */
86 -webkit-transform: translate(-100px, 150px); /* Safari */
87 transform: translate(-100px, 150px);
88 }
89}
90
91@-moz-keyframes mm_overlay_vanish_to_left {
92 0% {
93 }
94 100% {
95 -ms-transform: translate(-100px, 150px); /* IE 9 */
96 -webkit-transform: translate(-100px, 150px); /* Safari */
97 transform: translate(-100px, 150px);
98 }
99}
100
101@-o-keyframes mm_overlay_vanish_to_left {
102 0% {
103 }
104 100% {
105 -ms-transform: translate(-100px, 150px); /* IE 9 */
106 -webkit-transform: translate(-100px, 150px); /* Safari */
107 transform: translate(-100px, 150px);
108 }
109}
Top-Left
1.mm-overlay-fixed {
2 bottom: initial;
3 left: 0px;
4 top: 0px;
5 right: initial;
6}
7
8.mm-frame-overlay {
9 border-bottom: 1px solid;
10 border-left: initial;
11 border-top: initial;
12 border-right: 1px solid;
13 border-radius: 0 0 10px 0;
14}
Top-Right
1.mm-overlay-fixed {
2 bottom: initial;
3 left: initial;
4 top: 0px
5 right: 0px;
6}
7
8.mm-frame-overlay {
9 border-bottom: 1px solid;
10 border-left: 1px solid;
11 bottom-top: initial;
12 bottom-right: initial;
13 border-radius: 0 0 0 10px
14}
Amending a Corner Peel for the purpose of a homepage promotion
When adding a Corner Peel for the purpose of promoting on a homepage, you may want to configure this differently to the Corner Peel post-purchase.
There's a few different areas that you'd need to amend:
-
Edit Brand -> Injection points is where you define what the injection points are. For the purpose of configuring a new corner-peel on the homepage, we would add a new injection point and set the triggering situation to that of the homepage promotion situation.
-
Setup -> Onsite Content -> Referrer-[Name of situation from step above] is where you configure what properties the newly created injection point has (including any special CSS for it).
-
Class to be added to the wrapper of the embedded div in the client page - > Ensure you add '
mm-overlay-fixed' here to make sure the injection point is matched to the stylesheet ID. -
Edit Corner Peel CSS from within the design is where you control the corner peel itself (not the thing that decides where it goes).
