releasebird-javascript-sdk 1.0.2

package/src/Styles.js

@@ -0,0 +1,453 @@
+export const injectStyledCSS = (
+  backgroundColor,
+  textColor,
+  launcherColor,
+  launcherPosition,
+  spaceLeftRight,
+  spaceBottom,
+  isMobile
+) => {
+
+    const cta__modal = ` 
+        cta_button {
+    background-color: none;
+    border: none;
+    background-color: #294eab;
+    border-radius: 5px;
+    font-weight: bold;
+    color: white;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.cta__modal--standard {
+        width: 420px !important;
+}
+
+.cta__modal--big {
+        width: 680px !important;
+}
+  
+
+.cta__modal-dimmer {
+    position: fixed;
+    display: none;
+    z-index: 90;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0);
+}
+
+
+.circle {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background-color: #3498db;
+    margin-right: 20px;
+}
+
+.vertical-text {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+    color: black;
+    font-size: 18px;
+}
+
+.feedbackButtonText {
+    margin-top: 20px;
+    --webkit-transform: rotate(90deg); /* Safari and Chrome */
+    --moz-transform: rotate(90deg); /* Firefox */
+    --ms-transform: rotate(90deg); /* IE 9 */
+    --o-transform: rotate(90deg); /* Opera */
+    transform: rotate(90deg);
+    --webkit-transform: translate(-50%, 50%);
+
+}
+
+.cta__modal-dimmer--visible {
+    display: block;
+    animation: show 0.2s;
+    animation-fill-mode: forwards;
+}
+
+.cta__modal {
+    position: fixed;
+    outline: none;
+    z-index: 10000000;
+    background-color: transparent;
+    display: none !important;
+    width: ${!isMobile ? '450px' : '100% !important'};
+    border-radius: ${!isMobile ? '24' : 0}px;
+    font-family: inherit;
+    overflow-y: hidden;
+    height: ${!isMobile ? '725px' : '100%'};
+    text-align: center;
+    bottom: ${!isMobile ? spaceBottom + 30 : 0}px;
+    right: ${(launcherPosition === 'right' && !isMobile) ? (spaceLeftRight + 10) + 'px' : 'unset'};
+    left: ${(launcherPosition === 'left' && !isMobile) ? (spaceLeftRight + 10)+ 'px' : 'unset'};
+    top: ${!isMobile ? 'unset' : 0}px;
+}
+
+.cta__modal_loading {
+    position: fixed;
+    outline: none;
+    z-index: 1000000;
+    background-color: white;
+    display: none !important;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-family: inherit;
+    overflow-y: auto;
+    height: 650px;
+    text-align: center;
+}
+
+.cta__modal--visible {
+    display: block !important;
+    animation: show 0.3s;
+    animation-fill-mode: forwards;
+    margin-bottom: 25px;
+}
+
+.cta__modal img {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.launcherButton {
+    backgroundColor:transparent;
+    width:50px;
+    height:50px;
+    z-index: 2147483630;
+    position:fixed;
+    bottom:${spaceBottom}px;
+    right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
+    left:${launcherPosition === 'left' ? spaceLeftRight + 'px' : 'unset'};
+    cursor:pointer;
+}
+
+.launcherButton5 {
+    backgroundColor:transparent;
+    width:70px;
+    height:50px;
+    z-index: 2147483630;
+    position:fixed;
+    bottom:${spaceBottom}px;
+    right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
+    left:${launcherPosition === 'left' ? spaceLeftRight + 'px' : 'unset'};
+    cursor:pointer;
+}
+
+.rbird_badge {
+    position: fixed;
+    bottom: ${spaceBottom + 35}px;
+    right: ${launcherPosition === 'right' ? (spaceLeftRight - 10) + 'px' : 'unset'};
+    left: ${launcherPosition === 'left' ? (spaceLeftRight + 35) + 'px' : 'unset'};
+    z-index: 2147483630;
+    padding: 5px 10px;
+    border-radius: 50%;
+    background-color: red;
+    color: white;
+    font-size: 12px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+}
+
+.markerBoundary {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100%);
+    height: calc(100% - 12px);
+    border: 6px solid red;
+    z-index: 100000;
+}
+
+.screenshotCloseButton {
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    right: 0;
+    text-align: center;
+    padding: 5px;
+    width: 50px;
+    background-color: red;
+    color: white;
+    font-weight: 500;
+    font-family: Arial, serif;
+}
+
+.editorButtons {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    height: 25px;
+    width: 200px;
+    background-color: white;
+    border: 1px solid lightgrey;
+    border-radius: 5px;
+}
+
+
+#myImg {
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+#myImg:hover {opacity: 0.7;}
+
+/* The Modal (background) */
+.modalImageViewer {
+    position: fixed; /* Stay in place */
+    z-index: 10000000000; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (image) */
+.modal-content-imageViewer {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+}
+
+/* Caption of Modal Image */
+#caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 150px;
+}
+
+/* Add Animation */
+.modal-content, #caption {
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@keyframes zoom {
+    from {transform: scale(0.1)}
+    to {transform: scale(1)}
+}
+
+/* The Close Button */
+.rbird_close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.hideWidgetButton {
+width: 15px;
+height: 15px;
+position: fixed;
+cursor: pointer;
+bottom: ${spaceBottom + 45}px;
+right: ${launcherPosition === 'right' ? (spaceLeftRight -15) + 'px' : 'unset'};
+left: ${launcherPosition === 'left' ? (spaceLeftRight -15) + 'px' : 'unset'};
+z-index: 2147483630;
+}
+
+.rbird_closeclose:hover,
+.rbird_closeclose:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.rbird-content-iframe {
+width: 100%; 
+height: 100%; 
+background: transparent
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+    .modal-content {
+        width: 100%;
+    }
+}
+    }`
+
+    const oldNode = document.querySelector(".rbird-styles");
+    if (oldNode) {
+        oldNode.remove();
+    }
+    const node = document.createElement("style");
+    node.innerHTML = cta__modal;
+    node.className = "rbird-styles";
+    document.body.appendChild(node);
+
+    return "";
+
+};
+
+export function launcher0(launcherColor) {
+    return `<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.04 149.04">
+    <circle cx="74.52" cy="74.52" r="74.52"
+            transform="translate(-10.8 136.39) rotate(-80.95)"
+            fill="${launcherColor}"/>
+    <path fill="#ffffff"
+          d="m74.48,27.59c-28.91,0-52.34,20.8-52.34,46.47,0,13.06,6.07,24.85,15.84,33.29v18.58l23.44-6.87c4.18.95,8.55,1.46,13.06,1.46,28.91,0,52.34-20.8,52.34-46.47s-23.44-46.47-52.34-46.47Z"/>
+</svg>`
+}
+
+export function launcher1(launcherColor) {
+    return `<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 149 149" style="enable-background:new 0 0 149 149;">
+    <circle className="st0" cx="74.5" cy="74.5" r="74.5" fill="${launcherColor}"/>
+    <g>
+        <path fill="#ffffff" className="st1" d="M100.3,97.3H33l17.9-17.9V48l5.5-5.5h43.8l5.5,5.5v43.8L100.3,97.3z M43.4,93h55.1l3-3V49.7l-3-3H58.3l-3,3
+                                v31.4L43.4,93z"/>
+    </g>
+</svg>`
+}
+
+export function launcher2(launcherColor) {
+    return `<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"
+                              x="0px" y="0px"
+                              viewBox="0 0 149 149" style="enable-background:new 0 0 149 149;">
+    <circle className="st0" cx="74.5" cy="74.5" r="74.5" fill="${launcherColor}"/>
+    <path fill="#ffffff" className="st1" d="M108.8,37c-9-9.1-21-14.1-33.8-14.1c-12.8,0-24.8,5-33.8,14.1c-9,9.1-14,21.2-14,34c0,7.5,1.8,15,5.1,21.7
+                        c-1.6,6.4-6.1,11.7-12.1,14.4c-1.4,0.5-1.8,2.4-0.8,3.5c4,4.5,9.7,7.1,15.7,7.1c5.5,0,10.7-2.2,14.5-6c7.6,4.8,16.3,7.3,25.4,7.3
+                        c12.8,0,24.8-5,33.8-14.1c9-9.1,14-21.2,14-34S117.8,46,108.8,37L108.8,37z M75,114.6c-8.8,0-17.2-2.6-24.5-7.6l0,0
+                        c-0.9-0.6-2.2-0.5-3,0.4c-3.1,3.7-7.7,5.8-12.5,5.8c-3.7,0-7.3-1.3-10.2-3.6c6.1-3.6,10.5-9.7,12-16.8c0.1-0.6,0-1.1-0.2-1.6
+                        c-3.3-6.2-5-13.2-5-20.3c0-24.1,19.4-43.7,43.3-43.7s43.3,19.6,43.3,43.7S98.9,114.6,75,114.6L75,114.6z"/>
+</svg>`
+}
+
+export function launcher3(launcherColor) {
+    return `<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"
+                              x="0px" y="0px"
+                              viewBox="0 0 149 149" style="enable-background:new 0 0 149 149;">
+    <circle className="st0" cx="74.5" cy="74.5" r="74.5" fill="${launcherColor}"/>
+    <g id="text_chat">
+        <g>
+            <path fill="#ffffff" className="st1" d="M74.5,31.6c-23.7,0-42.9,19.2-42.9,42.9c0,6.5,1.5,12.9,4.3,18.7l-2.4,10.6c-0.7,3.3-0.1,6.4,1.7,8.6
+                                c2.2,2.8,5.9,3.9,10,3l10.6-2.3c5.8,2.8,12.3,4.3,18.7,4.3c23.7,0,42.9-19.2,42.9-42.9S98.2,31.6,74.5,31.6z"/>
+            <g>
+                <path fill="#ffffff" className="st1" d="M87.4,70.2H61.6c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3h25.7c2.4,0,4.3,1.9,4.3,4.3
+                                    C91.7,68.3,89.8,70.2,87.4,70.2z"/>
+            </g>
+            <g>
+                <path fill="#ffffff" className="st1"
+                      d="M74.5,87.4H61.6c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3h12.9c2.4,0,4.3,1.9,4.3,4.3S76.9,87.4,74.5,87.4z"
+                />
+            </g>
+        </g>
+    </g>
+</svg>`
+}
+
+export function launcher4(launcherColor) {
+    return `<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"
+                              x="0px" y="0px"
+                              viewBox="0 0 149 149" style="enable-background:new 0 0 149 149;">
+    <circle className="st0" cx="74.5" cy="74.5" r="74.5" fill="${launcherColor}"/>
+    <path fill="#ffffff" className="st1" d="M112.5,47.2c2.2,4.3,2.2,9.9,2.2,21.2v4.8c0,6.8,0,10.2-0.8,13c-1.9,6.6-7.1,11.7-13.6,13.6
+                            c-2.8,0.8-6.2,0.8-13,0.8h-2.2l-0.3,0c-4.1,0-8.1,1.3-11.5,3.7l-0.2,0.2l-10.5,7.5c-3.6,2.6-8.3-1.1-6.7-5.2c1.2-2.9-1-6.1-4.1-6.1
+                            h-2.4c-8.4,0-15.2-6.8-15.2-15.2v-17c0-11.3,0-16.9,2.2-21.2c1.9-3.8,5-6.9,8.8-8.8c4.3-2.2,9.9-2.2,21.2-2.2h16.1
+                            c11.3,0,16.9,0,21.2,2.2C107.5,40.4,110.6,43.5,112.5,47.2L112.5,47.2z M58.4,57.4c-1.7,0-3,1.4-3,3s1.4,3,3,3h32.2c1.7,0,3-1.4,3-3
+                            s-1.4-3-3-3H58.4z M66.5,73.5c-1.7,0-3,1.4-3,3c0,1.7,1.4,3,3,3h16.1c1.7,0,3-1.4,3-3c0-1.7-1.4-3-3-3H66.5z"/>
+</svg>`
+}
+
+export function launcher5(launcherColor) {
+    return `<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 3437.83 2395.28">
+    <g id="Layer_1">
+        <polygon fill="${launcherColor}"
+                 points="404.34 1465.87 202.48 2395.28 949.73 1971.67 404.34 1465.87"/>
+        <path fill="${launcherColor}"
+              d="m3436.45,1275.75C3204.96,2696.73-100.03,2331.34,2.33,885.09,240.59-504.37,3514.92-169.98,3436.45,1275.75Z"/>
+        <path fill="#ffffff"
+              d="m759.32,1060.6c-17.38-7.23-39.16-13.43-64.74-18.44l-.34-.06c-.67-.11-1.33-.25-1.97-.43-1.22-.33-2.51-.62-3.83-.85-1-.23-2.01-.41-3.07-.55-.25-.03-.5-.08-.76-.14l-.59-.13c-16.86-3.33-30.03-6.51-39.15-9.44-7.87-2.52-14.24-6.33-19.48-11.64-4.35-4.41-6.46-10.6-6.46-18.93v-.27c0-9.45,4.18-16.37,13.16-21.77,10.61-6.38,26.42-9.62,46.99-9.62,13.82,0,28.57,2.7,43.82,8.04,15.5,5.42,30.6,13.17,44.88,23.03l10.87,7.51,41.85-83.7-8.25-5.65c-13.2-9.05-27.35-16.89-42.06-23.3-14.73-6.42-30-11.39-45.38-14.79-15.48-3.42-30.88-5.15-45.74-5.15-32.19,0-60.21,5.12-83.27,15.2-23.74,10.39-42.16,25.79-54.76,45.77-12.51,19.86-18.86,43.92-18.86,71.5v.27c0,31.23,6.92,56,20.58,73.63,13.41,17.32,30.04,29.64,49.41,36.6,17.97,6.46,40.76,11.89,67.75,16.14l5.41.74c.83.21,1.66.35,2.48.42l1.07.19c14.41,2.26,26.3,4.79,35.35,7.52,7.65,2.31,13.85,5.87,18.41,10.57,3.84,3.96,5.71,9.51,5.71,16.97v.27c0,10.99-4.64,18.96-14.61,25.08-11.48,7.06-28.45,10.64-50.41,10.64-19.62,0-39-3.22-57.61-9.56-18.49-6.3-34.99-15.35-49.05-26.9l-10.58-8.69-45.86,81.61,7.39,6.11c13.18,10.89,28.3,20.32,44.94,28.02,16.54,7.65,34.43,13.54,53.18,17.5,18.69,3.94,38.06,5.94,57.58,5.94,33.03,0,61.85-5.04,85.67-14.99,24.56-10.25,43.59-25.48,56.58-45.26,12.95-19.73,19.52-43.57,19.52-70.86v-.54c0-29.11-6.39-52.69-19.01-70.08-12.42-17.12-28.16-29.74-46.8-37.5Z"/>
+        <path fill="#ffffff"
+              d="m1067.48,1143.49c0,19.67-4.92,34.26-15.04,44.6-10.05,10.27-24.27,15.27-43.48,15.27s-33.09-4.98-43.04-15.24c-10.05-10.35-14.93-24.95-14.93-44.63v-265.13h-97.28v263.23c0,32.62,6.08,61.07,18.07,84.57,12.25,24,30.39,42.54,53.92,55.1,23.1,12.33,51.11,18.58,83.26,18.58s60.2-6.25,83.38-18.57c23.62-12.55,41.85-31.08,54.19-55.07,12.09-23.51,18.23-51.98,18.23-84.6v-263.23h-97.28v265.13Z"/>
+        <path fill="#ffffff"
+              d="m1457.81,894.78c-20.32-10.89-44-16.42-70.4-16.42h-169.63v417.4h97.28v-153h72.35c26.38,0,50.05-5.47,70.36-16.26,20.59-10.94,36.78-26.64,48.14-46.66,11.25-19.84,16.96-43.06,16.96-69.01s-5.7-49.19-16.95-69.12c-11.35-20.11-27.53-35.89-48.11-46.93Zm-39.38,136.32c-2.82,5.52-6.61,9.64-11.56,12.62-5.01,3.01-10.76,4.47-17.56,4.47h-74.25v-75.25h74.25c6.99,0,12.82,1.46,17.83,4.47,4.9,2.94,8.61,7.06,11.35,12.6,2.9,5.88,4.38,12.89,4.38,20.83s-1.49,14.53-4.44,20.27Z"/>
+        <path fill="#ffffff"
+              d="m1798.27,894.78c-20.32-10.89-44-16.42-70.4-16.42h-169.63v417.4h97.28v-153h72.35c26.38,0,50.05-5.47,70.36-16.26,20.59-10.94,36.78-26.64,48.14-46.66,11.25-19.84,16.96-43.05,16.96-69.01s-5.7-49.2-16.95-69.12c-11.35-20.11-27.53-35.89-48.11-46.93Zm-39.37,136.32c-2.83,5.52-6.61,9.65-11.56,12.62-5.01,3.01-10.75,4.47-17.56,4.47h-74.25v-75.25h74.25c6.99,0,12.82,1.46,17.83,4.47,4.9,2.94,8.61,7.06,11.35,12.6,2.9,5.88,4.38,12.89,4.38,20.83s-1.49,14.53-4.43,20.27Z"/>
+        <path fill="#ffffff"
+              d="m2127.18,893.76c-23.42-12.92-50.7-19.47-81.1-19.47s-57.69,6.55-81.1,19.47c-23.64,13.05-42.19,31.74-55.13,55.57-12.8,23.57-19.3,51.11-19.3,81.84v111.77c0,30.74,6.49,58.27,19.3,81.84,12.95,23.83,31.5,42.53,55.13,55.57,23.4,12.92,50.69,19.47,81.1,19.47s57.69-6.55,81.1-19.47c23.64-13.05,42.19-31.74,55.13-55.57,12.8-23.57,19.3-51.11,19.3-81.84v-111.77c0-30.74-6.49-58.27-19.3-81.84-12.94-23.82-31.49-42.52-55.13-55.57Zm-25.57,251.08c0,11.8-2.34,22.23-6.95,31.01-4.51,8.57-10.7,14.99-18.94,19.62-8.34,4.69-18.32,7.07-29.64,7.07s-21.3-2.38-29.64-7.07c-8.24-4.63-14.43-11.05-18.94-19.62-4.62-8.77-6.95-19.2-6.95-31.01v-115.57c0-11.81,2.34-22.24,6.96-31.01,4.51-8.57,10.7-14.99,18.93-19.62,8.34-4.69,18.31-7.07,29.64-7.07s21.3,2.38,29.64,7.07c8.23,4.63,14.42,11.05,18.93,19.62,4.62,8.78,6.96,19.22,6.96,31.01v115.57Z"/>
+        <path fill="#ffffff"
+              d="m2499.13,1120.82c18.38-10.85,32.78-26.34,42.79-46.06,9.83-19.36,14.81-41.96,14.81-67.18s-4.98-47.82-14.81-67.19c-10.01-19.71-24.35-35.2-42.63-46.04-18.18-10.79-39.41-16.26-63.1-16.26h-184.28v417.67h97.28v-158.7h26.89l88.92,158.7h116.71l-97.24-167.69c5.07-2.07,9.96-4.49,14.65-7.26Zm-45.87-93.53c-2.27,5.06-5.3,8.79-9.25,11.38-3.91,2.57-8.42,3.82-13.78,3.82h-81.03v-69.83h81.03c5.54,0,10.14,1.25,14.05,3.81,3.96,2.6,6.98,6.32,9.25,11.38,2.47,5.51,3.73,12.11,3.74,19.61-.16,7.58-1.51,14.25-4.01,19.83Z"/>
+        <polygon fill="#ffffff"
+                 points="2559.82 878.36 2559.82 972.93 2667.24 972.93 2667.24 1295.76 2764.53 1295.76 2764.53 972.93 2871.96 972.93 2871.96 878.36 2559.82 878.36"/>
+    </g>
+</svg>`
+}
+
+export function launcher5Open(launcherColor) {
+    return `<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3437.83 2395.28">
+    <g id="Layer_1">
+
+        <path fill="${launcherColor}"
+              d="m3436.45,1275.75C3204.96,2696.73-100.03,2331.34,2.33,885.09,240.59-504.37,3514.92-169.98,3436.45,1275.75Z"/>
+        <path fill="#ffffff"
+              d="m759.32,1060.6c-17.38-7.23-39.16-13.43-64.74-18.44l-.34-.06c-.67-.11-1.33-.25-1.97-.43-1.22-.33-2.51-.62-3.83-.85-1-.23-2.01-.41-3.07-.55-.25-.03-.5-.08-.76-.14l-.59-.13c-16.86-3.33-30.03-6.51-39.15-9.44-7.87-2.52-14.24-6.33-19.48-11.64-4.35-4.41-6.46-10.6-6.46-18.93v-.27c0-9.45,4.18-16.37,13.16-21.77,10.61-6.38,26.42-9.62,46.99-9.62,13.82,0,28.57,2.7,43.82,8.04,15.5,5.42,30.6,13.17,44.88,23.03l10.87,7.51,41.85-83.7-8.25-5.65c-13.2-9.05-27.35-16.89-42.06-23.3-14.73-6.42-30-11.39-45.38-14.79-15.48-3.42-30.88-5.15-45.74-5.15-32.19,0-60.21,5.12-83.27,15.2-23.74,10.39-42.16,25.79-54.76,45.77-12.51,19.86-18.86,43.92-18.86,71.5v.27c0,31.23,6.92,56,20.58,73.63,13.41,17.32,30.04,29.64,49.41,36.6,17.97,6.46,40.76,11.89,67.75,16.14l5.41.74c.83.21,1.66.35,2.48.42l1.07.19c14.41,2.26,26.3,4.79,35.35,7.52,7.65,2.31,13.85,5.87,18.41,10.57,3.84,3.96,5.71,9.51,5.71,16.97v.27c0,10.99-4.64,18.96-14.61,25.08-11.48,7.06-28.45,10.64-50.41,10.64-19.62,0-39-3.22-57.61-9.56-18.49-6.3-34.99-15.35-49.05-26.9l-10.58-8.69-45.86,81.61,7.39,6.11c13.18,10.89,28.3,20.32,44.94,28.02,16.54,7.65,34.43,13.54,53.18,17.5,18.69,3.94,38.06,5.94,57.58,5.94,33.03,0,61.85-5.04,85.67-14.99,24.56-10.25,43.59-25.48,56.58-45.26,12.95-19.73,19.52-43.57,19.52-70.86v-.54c0-29.11-6.39-52.69-19.01-70.08-12.42-17.12-28.16-29.74-46.8-37.5Z"/>
+        <path fill="#ffffff"
+              d="m1067.48,1143.49c0,19.67-4.92,34.26-15.04,44.6-10.05,10.27-24.27,15.27-43.48,15.27s-33.09-4.98-43.04-15.24c-10.05-10.35-14.93-24.95-14.93-44.63v-265.13h-97.28v263.23c0,32.62,6.08,61.07,18.07,84.57,12.25,24,30.39,42.54,53.92,55.1,23.1,12.33,51.11,18.58,83.26,18.58s60.2-6.25,83.38-18.57c23.62-12.55,41.85-31.08,54.19-55.07,12.09-23.51,18.23-51.98,18.23-84.6v-263.23h-97.28v265.13Z"/>
+        <path fill="#ffffff"
+              d="m1457.81,894.78c-20.32-10.89-44-16.42-70.4-16.42h-169.63v417.4h97.28v-153h72.35c26.38,0,50.05-5.47,70.36-16.26,20.59-10.94,36.78-26.64,48.14-46.66,11.25-19.84,16.96-43.06,16.96-69.01s-5.7-49.19-16.95-69.12c-11.35-20.11-27.53-35.89-48.11-46.93Zm-39.38,136.32c-2.82,5.52-6.61,9.64-11.56,12.62-5.01,3.01-10.76,4.47-17.56,4.47h-74.25v-75.25h74.25c6.99,0,12.82,1.46,17.83,4.47,4.9,2.94,8.61,7.06,11.35,12.6,2.9,5.88,4.38,12.89,4.38,20.83s-1.49,14.53-4.44,20.27Z"/>
+        <path fill="#ffffff"
+              d="m1798.27,894.78c-20.32-10.89-44-16.42-70.4-16.42h-169.63v417.4h97.28v-153h72.35c26.38,0,50.05-5.47,70.36-16.26,20.59-10.94,36.78-26.64,48.14-46.66,11.25-19.84,16.96-43.05,16.96-69.01s-5.7-49.2-16.95-69.12c-11.35-20.11-27.53-35.89-48.11-46.93Zm-39.37,136.32c-2.83,5.52-6.61,9.65-11.56,12.62-5.01,3.01-10.75,4.47-17.56,4.47h-74.25v-75.25h74.25c6.99,0,12.82,1.46,17.83,4.47,4.9,2.94,8.61,7.06,11.35,12.6,2.9,5.88,4.38,12.89,4.38,20.83s-1.49,14.53-4.43,20.27Z"/>
+        <path fill="#ffffff"
+              d="m2127.18,893.76c-23.42-12.92-50.7-19.47-81.1-19.47s-57.69,6.55-81.1,19.47c-23.64,13.05-42.19,31.74-55.13,55.57-12.8,23.57-19.3,51.11-19.3,81.84v111.77c0,30.74,6.49,58.27,19.3,81.84,12.95,23.83,31.5,42.53,55.13,55.57,23.4,12.92,50.69,19.47,81.1,19.47s57.69-6.55,81.1-19.47c23.64-13.05,42.19-31.74,55.13-55.57,12.8-23.57,19.3-51.11,19.3-81.84v-111.77c0-30.74-6.49-58.27-19.3-81.84-12.94-23.82-31.49-42.52-55.13-55.57Zm-25.57,251.08c0,11.8-2.34,22.23-6.95,31.01-4.51,8.57-10.7,14.99-18.94,19.62-8.34,4.69-18.32,7.07-29.64,7.07s-21.3-2.38-29.64-7.07c-8.24-4.63-14.43-11.05-18.94-19.62-4.62-8.77-6.95-19.2-6.95-31.01v-115.57c0-11.81,2.34-22.24,6.96-31.01,4.51-8.57,10.7-14.99,18.93-19.62,8.34-4.69,18.31-7.07,29.64-7.07s21.3,2.38,29.64,7.07c8.23,4.63,14.42,11.05,18.93,19.62,4.62,8.78,6.96,19.22,6.96,31.01v115.57Z"/>
+        <path fill="#ffffff"
+              d="m2499.13,1120.82c18.38-10.85,32.78-26.34,42.79-46.06,9.83-19.36,14.81-41.96,14.81-67.18s-4.98-47.82-14.81-67.19c-10.01-19.71-24.35-35.2-42.63-46.04-18.18-10.79-39.41-16.26-63.1-16.26h-184.28v417.67h97.28v-158.7h26.89l88.92,158.7h116.71l-97.24-167.69c5.07-2.07,9.96-4.49,14.65-7.26Zm-45.87-93.53c-2.27,5.06-5.3,8.79-9.25,11.38-3.91,2.57-8.42,3.82-13.78,3.82h-81.03v-69.83h81.03c5.54,0,10.14,1.25,14.05,3.81,3.96,2.6,6.98,6.32,9.25,11.38,2.47,5.51,3.73,12.11,3.74,19.61-.16,7.58-1.51,14.25-4.01,19.83Z"/>
+        <polygon fill="#ffffff"
+                 points="2559.82 878.36 2559.82 972.93 2667.24 972.93 2667.24 1295.76 2764.53 1295.76 2764.53 972.93 2871.96 972.93 2871.96 878.36 2559.82 878.36"/>
+    </g>
+</svg>`
+}
+
+export function launcherOpen(launcherColor) {
+    return `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                         x="0px"
+                         y="0px"
+                         viewBox="0 0 494.08 494.08" style="enable-background:new 0 0 494.08 494.08;">
+                        <g>
+                            <path fill="${launcherColor}" d="M247.04,0C110.604,0,0,110.604,0,247.04s110.604,247.04,247.04,247.04s247.04-110.604,247.04-247.04
+                                    C493.845,110.701,383.379,0.235,247.04,0z M247.04,298.667l-79.787-80.64l14.293-13.653l65.493,64l65.493-64l14.72,14.507
+                                    L247.04,298.667z"/>
+                        </g>
+                    </svg>`
+}
+
+export const hideWidgetImage = `<svg id="Layer_1" enable-background="new 0 0 64 64" viewBox="0 0 64 64"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m34.8 32 19.8-19.8c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-19.8 19.8-19.8-19.8c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l19.8 19.8-19.8 19.8c-.8.8-.8 2 0 2.8s2 .8 2.8 0l19.8-19.8 19.8 19.8c.8.8 2 .8 2.8 0s.8-2 0-2.8z"/>
+                </svg>`
+
+

package/src/index.js

@@ -0,0 +1,87 @@
+import { injectStyledCSS } from "./Styles";
+import RbirdSessionManager from "./RbirdSessionManager";
+
+class Rbird {
+
+    static isMobileDevice = () =>  {
+        const mobileMaxWidth = 768; // Definiert die maximale Breite für mobile Geräte, z.B. Tablets und Smartphones
+        return window.innerWidth <= mobileMaxWidth;
+    }
+
+    static setStyles(
+        backgroundColor = "blue",
+        textColor = "red",
+        launcherColor = "orange",
+        launcherPosition = "bottom",
+        spaceLeftRight = 30,
+        spaceBottom = 30
+    ) {
+        runFunctionWhenDomIsReady(() => {
+            injectStyledCSS(
+                backgroundColor,
+                textColor,
+                launcherColor,
+                launcherPosition,
+                spaceLeftRight,
+                spaceBottom,
+                this.isMobileDevice()
+            );
+        });
+    }
+
+    static instance;
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new Rbird();
+            return this.instance;
+        } else {
+            return this.instance;
+        }
+    }
+
+    constructor() {
+        if (typeof window !== "undefined") {
+            // init
+        }
+    }
+
+    static initialize(apiKey) {
+        try {
+            const instance = this.getInstance();
+            if (instance.initialized) {
+                console.warn("Rbird already initialized.");
+                return;
+            }
+            RbirdSessionManager.getInstance().init(apiKey);
+            instance.initialized = true;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    static identify(identify, hash) {
+        try {
+            RbirdSessionManager.getInstance().identifyUser(identify, hash);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+}
+
+export const runFunctionWhenDomIsReady = (callback) => {
+    if (
+        document.readyState === "complete" ||
+        document.readyState === "loaded" ||
+        document.readyState === "interactive"
+    ) {
+        callback();
+    } else {
+        document.addEventListener("DOMContentLoaded", () => {
+            callback();
+        });
+    }
+}
+
+export default Rbird;

package/webpack.config.js

@@ -0,0 +1,86 @@
+const path = require("path");
+const webpack = require("webpack");
+const exec = require("child_process").exec;
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = {
+  mode: "production",
+  entry: {
+    index: "./src/index.js",
+  },
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "build"),
+    library: "Rbird",
+    libraryTarget: "umd",
+    libraryExport: "default",
+    globalObject: "this",
+    clean: true,
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          mangle: true,
+          sourceMap: true,
+          safari10: true,
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
+  devServer: {
+    open: true,
+    hot: true,
+    host: "0.0.0.0",
+    static: path.join(__dirname, "demo"),
+    port: 4444,
+  },
+  performance : {
+    hints : false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
+        use: ["url-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      PRODUCTION: 'true',
+      API: JSON.stringify("https://api.releasebird.com/papi"),
+      CONTENT_URL:  JSON.stringify("https://wcontent.releasebird.com"),
+    }),
+    {
+      apply: (compiler) => {
+        compiler.hooks.afterEmit.tap("AfterEmitPlugin", (compilation) => {
+          const nodeVersion = process.env.npm_package_version;
+          return exec(
+            `mkdir -p published/${nodeVersion} & mkdir -p published/latest & cp ./build/index.js published/${nodeVersion}/index.js & cp ./build/index.js published/latest/index.js`,
+            (err, stdout, stderr) => {
+              if (stdout) process.stdout.write(stdout);
+              if (stderr) process.stderr.write(stderr);
+            }
+          );
+        });
+      },
+    },
+  ],
+};