{% extends "templates/one-column.html" %}

{% block title %}Engage pages | ubuntu.com documentation{% endblock %}

{% block head_extra %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}
{% block content %}

<section class="p-strip--light is-shallow">
  <div class="row">
    <div class="col-8">
      <h1>Engage pages</h1>
    </div>
  </div>
</section>


<section lang="en" class="p-strip p-engage-banner--dark">
  <div class="row u-equal-height">
    <div class="col-7  u-vertically-center">
      <div>
        <h1 >
          Example engage engage_pages
        </h1>
        <br class="u-hide--medium u-hide--large" />
        <p class="u-hide--medium u-hide--large">
          <a href="#register-section" class="p-button">
            CTA
          </a>
        </p>
      </div>
    </div>
    <div class="col-5 u-hide--medium u-hide--small u-align--center u-vertically-center">
      {{
        image(
            url="https://assets.ubuntu.com/v1/2d935f28-openstack-cloud.svg",
            alt="",
            width="250",
            height="160",
            hi_def=True,
            loading="auto",
            attrs={"style": "max-height: 410px; max-width: 250px;"},
        ) | safe
      }}
    </div>
  </div>
</section>

<section class="p-strip is-shallow is-bordered">
  <div class="row">
    <div class="col-8">
      <p>This is some text about the engage resource or webinar.</p>
      <p>This is some more text.</p>
    </div>
  </div>
</section>



<section class="p-strip">
  <div class="row">
    <div class="col-8">
      <div class="row"> <div class="col-8">
        <h2>
          Markdown code example
        </h2>
        <pre><code>
---
wrapper_template: "engage/_base_engage_markdown.html"
context:
     title: "From VMware to Charmed OpenStack"
     meta_description: "In this webinar, we present the key similarities and differences between VMware's virtualisation offerings and Charmed OpenStack."
     meta_image: https://assets.ubuntu.com/v1/27fed536-vmware-to-charmed-openstack-social.jpg
     meta_copydoc: https://docs.google.com/document/d/13aUs6sT_Z4kTv1-KiISD22yqh_1VOw9xLLqEMftJZyU/edit
     header_title: "From VMware to Charmed&nbsp;OpenStack"
     header_subtitle:
     header_image: "https://assets.ubuntu.com/v1/2d935f28-openstack-cloud.svg"
     header_image_width="250"
     header_image_height="160"
     header_url: '#register-section'
     header_cta: Register for the webinar
     header_class: p-engage-banner--dark
     header_lang: en
     webinar_code: '&lt;div class="jsBrightTALKEmbedWrapper" style="width:100%; height:100%; position:relative;background: #ffffff;">&lt;script class="jsBrightTALKEmbedConfig" type="application/json">{ "channelId" : 6793, "language": "en-US", "commId" : 348935, "displayMode" : "standalone", "height" : "auto" }&lt;/script>&lt;script src="https://www.brighttalk.com/clients/js/player-embed/player-embed.js" class="jsBrightTALKEmbed">&lt;/script>&lt;/div>'
     form_include:
     form_id:
     form_return_url:
---

This is some text.

This is some more text.

      </code></pre>
      </div>
    </div>
</section>
<section class="p-strip">
  <div class="row">
    <div class="col-8">
      <h2>
        Details
      </h2>
      <ul class="p-list">
        <li class="p-list__item"><strong>wrapper_template</strong> - this needs to be <code>"engage/_base_engage_markdown.html"</code> </li>
        <li class="p-list__item"><strong>title</strong> - page title for the document head</li>
        <li class="p-list__item"><strong>meta_description</strong> - meta_description for the document head</li>
        <li class="p-list__item"><strong>meta_image</strong>: url of the image for social media meta data</li>
        <li class="p-list__item"><strong>meta_copydoc:</strong> - url of the google copy doc</li>
        <li class="p-list__item"><strong>header_title</strong> - text for the &lt;h1> of the pages</li>
        <li class="p-list__item"><strong>header_subtitle</strong> - <em>optional</em> - text for the &lt;h4> subtitle</li>
        <li class="p-list__item"><strong>header_image:</strong> - <em>optional</em> - url of the image to be on the right of the banner</li>
        <li class="p-list__item"><strong>header_image_width</strong> - <em>required</em> the width of the header image in pixels</li>
        <li class="p-list__item"><strong>  header_image_height</strong> <em>required</em> - the height of the header image in pixels</li>
        <li class="p-list__item"><strong>header_url</strong> - the url or anchor for the mobile view CTA - usually '#register-section'</li>
        <li class="p-list__item"><strong>header_cta</strong> - text for the mobile view CTA - usually 'Register for the webinar' or 'Download the whitepaper'</li>
        <li class="p-list__item"><strong>header_class</strong> - the class of the engage banner you want to use - usually one of: p-engage-banner--dark, p-engage-banner--grad, p-engage-banner--k8s, p-engage-banner--openstack, p-engage-banner--aqua, p-engage-banner--snapcraft</li>
        <li class="p-list__item"><strong>header_lang</strong> - <em>optional</em> - do not add for english</li>
        <li class="p-list__item"><strong>webinar_code:</strong>  - <em>optional</em> - the full html of the webinar embed code from brighttalk</li>
        <li class="p-list__item"><strong>form_include</strong> - <em>optional</em> - the language code of the form to use - either 'en, 'de', or 'fr' </li>
        <li class="p-list__item"><strong>form_id</strong> - <em>optional</em> - the marketo form id</li>
        <li class="p-list__item"><strong>form_return_url</strong> - <em>optional</em> - the url you want to send users to after they fill in the form, usually a marketo thank-you page</li>
      </ul>
    </div>
  </div>
</section>
{% endblock content %}