বিষয়বস্তুতে যান
ব্যবহারকারী গাইডসাপোর্ট ডেমো অনুরোধ করুন সাইন ইন করুন
Pushwoosh.com

রিচ মিডিয়া টেমপ্লেট সিনট্যাক্স

টেমপ্লেটের কাঠামো

Anchor link to

একটি টেমপ্লেট হলো একটি .zip আর্কাইভ যা রিচ মিডিয়া অ্যাসেট হিসেবে HTML, JavaScript, CSS এবং ছবি ধারণ করতে পারে। আর্কাইভের রুটে অবশ্যই একটি index.html ফাইল থাকতে হবে।

টেমপ্লেট প্লেসহোল্ডার

Anchor link to

আপনি রিচ মিডিয়া টেমপ্লেটে প্লেসহোল্ডার ব্যবহার করতে পারেন যা আপনাকে রিচ মিডিয়া কন্টেন্টের মান পরিবর্তন এবং স্থানীয়করণ করতে দেবে।

একটি প্লেসহোল্ডারকে অবশ্যই নিচের ফরম্যাট অনুসরণ করতে হবে:

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

যেখানে:

  • Placeholder name — এটি প্লেসহোল্ডারের নাম যা রিচ মিডিয়া এডিটরে দেখা যাবে।
  • Type — এটি প্লেসহোল্ডারের প্রকার। প্রকারটি নিম্নলিখিত যেকোনো একটি মান হতে পারে:
    • color — কালার ইনপুট
    • text — টেক্সট ইনপুট
    • html — টেক্সট এরিয়া (একাধিক লাইনের টেক্সট)
  • Default value — ডিফল্ট মান যা এডিটরে কোনো মান প্রদান না করা হলে ব্যবহৃত হয়। যদি কোনোটি সেট করা না থাকে তবে Placeholder name ডিফল্ট মান হিসেবে ব্যবহৃত হয়।

উদাহরণ:

{{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 থেকে জাভাস্ক্রিপ্ট ফাইলের একটি লিঙ্ক যোগ করুন:
<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, ইত্যাদি) সংহত করতে পারেন তাদের মেথড, আইকন, ফন্ট, অ্যানিমেশন এবং আরও অনেক কিছু ব্যবহার করার জন্য।