सामग्री पर जाएं
उपयोगकर्ता गाइडसहायता डेमो अनुरोध करें साइन इन करें
Pushwoosh.com

रिच मीडिया टेम्प्लेट सिंटैक्स

टेम्प्लेट संरचना

Anchor link to

एक टेम्प्लेट बस एक .zip आर्काइव है जिसमें रिच मीडिया एसेट्स के रूप में HTML, JavaScript, CSS और छवियां हो सकती हैं। आर्काइव में इसके रूट में एक index.html फ़ाइल होनी चाहिए।

टेम्प्लेट प्लेसहोल्डर्स

Anchor link to

आप रिच मीडिया टेम्प्लेट्स में प्लेसहोल्डर्स का उपयोग कर सकते हैं जो आपको रिच मीडिया सामग्री में मानों को बदलने और स्थानीयकृत करने की अनुमति देगा।

एक प्लेसहोल्डर को नीचे दिए गए प्रारूप का पालन करना चाहिए:

{{ Placeholder name | Type | Default value }}`

जहाँ:

  • प्लेसहोल्डर का नाम — प्लेसहोल्डर का नाम है जो रिच मीडिया एडिटर में दिखाई देगा।
  • प्रकार — प्लेसहोल्डर का प्रकार है। प्रकार निम्नलिखित मानों में से कोई भी हो सकता है:
    • color — कलर इनपुट
    • text — टेक्स्ट इनपुट
    • html — टेक्स्ट एरिया (मल्टीलाइन टेक्स्ट)
  • डिफ़ॉल्ट मान — डिफ़ॉल्ट मान जो तब उपयोग किया जाता है जब एडिटर में कोई मान प्रदान नहीं किया जाता है। यदि कोई भी सेट नहीं है तो प्लेसहोल्डर का नाम डिफ़ॉल्ट मान के रूप में उपयोग किया जाता है।

उदाहरण:

{{Header text|text|Tell Us What You Think}}`

Pushwoosh.json जोड़ना

Anchor link to

आप प्लेसहोल्डर्स को ग्रुप कर सकते हैं ताकि वे रिच मीडिया एडिटर में एक साथ जुड़े रहें:

रिच मीडिया एडिटर इंटरफ़ेस जो इनपुट ग्रुप्स में एक साथ जुड़े हुए ग्रुप किए गए प्लेसहोल्डर्स को दिखा रहा है

इसे प्राप्त करने के लिए, index.html फ़ाइल के बगल में अपने रिच मीडिया टेम्प्लेट के साथ आर्काइव में pushwoosh.json फ़ाइल जोड़ें।

फ़ाइल की संरचना बहुत सरल है और स्व-व्याख्यात्मक होनी चाहिए:

{
  "input_groups": [
    ["Logo image URL", "Logo background color"],
    ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"],
    ["Main text", "Text background color"],
    ["Button text", "Button URL", "Button text color", "Button background color"]
  ]
}

उदाहरण

Anchor link to

सर्वेक्षणों के लिए कस्टम फ़ॉर्म कस्टम रिच मीडिया टेम्प्लेट्स के लिए एक सामान्य उपयोग का मामला है। ये फ़ॉर्म आपको मूल्यवान उपयोगकर्ता प्रतिक्रिया एकत्र करने की अनुमति देते हैं। डिफ़ॉल्ट टेम्प्लेट्स में एक कस्टम सर्वेक्षण फ़ॉर्म के साथ एक पूर्व-डिज़ाइन किया गया टेम्प्लेट उपलब्ध है। इसे अपने स्वयं के सर्वेक्षणों के लिए एक शुरुआती बिंदु के रूप में उपयोग करें।

उपयोगकर्ता की प्रतिक्रिया एकत्र करने के लिए इनपुट फ़ील्ड के साथ उदाहरण कस्टम सर्वेक्षण फ़ॉर्म टेम्प्लेट

फ़ॉर्म बनाते समय, रिच मीडिया एडिटर के भीतर संगतता और निर्बाध कार्यक्षमता सुनिश्चित करने के लिए कुछ सर्वोत्तम प्रथाओं का पालन करें।

यहाँ कंट्रोल पैनल में उपलब्ध डिफ़ॉल्ट टेम्प्लेट्स में से एक और उदाहरण है।

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }
        .main {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .logo {
            width: 100%;
            height: 15%;
            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');
            background-position: 50% 50%;
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #{{Logo background color|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Topic text color|color|FFFFFF}};
            background-color: #{{Topic background color|color|23B7A4}};
        }
        .topic {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .topic-wrapper h1, .topic-wrapper p {
            margin: 0;
        }
        .padding-wrapper {
            width: 100%;
            height: 55%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0 2% 0 2%;
            background-color: #{{Text background color|color|FFFFFF}};
        }
        .text-wrapper {
            height: 70%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        .text {
            width: 100%;
            height: 99%;
            overflow: auto;
            padding-right: 15px;
        }
        .button-wrapper {
            height: 30%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .button {
            display: table;
            width: 100%;
            height: 100%;
        }
        .button a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 2em;
            text-decoration: none;
            color:#{{Button text color|color|FFFFFF}};
            border-radius: 20px;
            background-color: #{{Button background color|color|23B7A4}};
        }


        @media only screen
        and (orientation: landscape) {
            .padding-wrapper {
                height: 45%;
            }
            .logo {
                height: 20%;
            }
            .button a {
                border-radius: 10px;
            }
        }
    </style>
</head>
<body>


<div class="main">
    <div class="logo"></div>
    <div class="topic-wrapper">
        <div class="topic">
            <h1>{{Topic text|text|TOPIC TEXT}}</h1>
            <p>{{Sub-topic text|text|Subtopic here}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Main text here}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.pushwoosh.com}}">
                    {{Button text|text|Submit}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

कस्टम रिच मीडिया के प्रदर्शन की निगरानी करें

Anchor link to

आप अपने द्वारा बनाए गए और Pushwoosh पर ZIP फ़ाइल के रूप में अपलोड किए गए कस्टम रिच मीडिया सामग्री के प्रदर्शन की भी निगरानी कर सकते हैं।

आप ट्रैक कर सकते हैं कि लोग आपके रिच मीडिया के साथ कैसे इंटरैक्ट करते हैं:

  • बटन क्लिक
  • लिंक क्लिक
  • फ़ॉर्म सबमिट

Pushwoosh को इन इंटरैक्शन को ट्रैक करने में सक्षम करने के लिए:

  1. प्रत्येक तत्व में एक “id” एट्रिब्यूट जोड़ें जिसे आप ट्रैक करना चाहते हैं।

उदाहरण के लिए:

लिंक क्लिक को ट्रैक करने के लिए:

<a id=“my_link_1” href=“#”>…</a>

फ़ॉर्म सबमिट को ट्रैक करने के लिए:

<form id=“my_form_1” action=“#” method=“GET”>…</form>

बटन क्लिक को ट्रैक करने के लिए:

<button id=“my_button_1” type=“button”>…</button> // type="button" is required
  1. टैग के अंत में CDN से JavaScript फ़ाइल का एक लिंक जोड़ें:
<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

रिच मीडिया में कस्टम तत्वों के लिए सर्वोत्तम प्रथाएं

Anchor link to

CSS स्टाइल को सावधानी से प्रबंधित करें

Anchor link to

सुनिश्चित करें कि आपकी CSS स्टाइल रिच मीडिया एडिटर स्टाइल के साथ टकराव से बचने के लिए विशिष्ट हैं। कम-विशिष्टता वाली स्टाइल का उपयोग करना, जैसे कि टैग नामों या सामान्य क्लास नामों पर लागू की गई स्टाइल, रिच मीडिया एडिटर की उपस्थिति को प्रभावित कर सकती हैं। अपनी स्टाइल को स्थानीय रखना सबसे अच्छा है—अपनी सामग्री को एक अद्वितीय ID या क्लास वाले कंटेनर में लपेटें और इस पहचानकर्ता का उपयोग अपने CSS चयनकर्ताओं में चाइल्ड तत्वों के लिए करें।

बाहरी लाइब्रेरी शामिल करें

Anchor link to

आप CSS या JavaScript लाइब्रेरी (जैसे Font Awesome, Bootstrap, Tailwind CSS, आदि) को उनके तरीकों, आइकन, फ़ॉन्ट, एनिमेशन, और बहुत कुछ का उपयोग करने के लिए एकीकृत कर सकते हैं।