doc_guide.html

---
layout: default
hide_toc: true
hide_bottom_nav: true
hide_breadcrumb: true
---



{%- comment -%} Assigned variables first by page, then by layout {%- endcomment -%}
{%- assign hide_nav = page.hide_nav -%}


{%- assign hide_bottom_nav = page.hide_bottom_nav -%}
{%- assign hide_breadcrumb = page.hide_breadcrumb -%}
{%- assign hide_feedback = page.hide_feedback -%}
{%- unless hide_nav -%}
{%- assign hide_nav = layout.hide_nav -%}
{%- endunless -%}

{%- unless hide_bottom_nav -%}
{%- assign hide_bottom_nav = layout.hide_bottom_nav -%}
{%- endunless -%}
{%- unless hide_breadcrumb -%}
{%- assign hide_breadcrumb = layout.hide_breadcrumb -%}
{%- endunless -%}
{%- unless hide_feedback -%}
{%- assign hide_feedback = layout.hide_feedback -%}
{%- endunless -%}



{% unless hide_nav %}
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-2 d-print-none collapse d-md-block" id="nav_bar"  >
  <div id="nav_col" class="  ">
  {% include left_nav_menu.html  %}
  </div>
</div>
{% endunless %}


<div class="col d-print-block " id="main_content" >
  <div id="doc-main-search">{% include docs_search.html %} </div>
  <div class="doc-container">
    <div class="row doc-row">
      <div id="doc-main" class="col-xl justify-content-between">
      <div id="content_start"></div>
      {%- unless hide_breadcrumb -%}
      <div id="breadcrumb">
      </div>
      {%- endunless -%}
      <h2 class="doc_menu_title"> {{ page.doc_top_header }} </h2>
      <p>  {{ page.doc_top_text | markdownify }} </p>


      <div id="doc_list" class="row justify-content-between">
        {%- for doc_list in page.doc_menu_list  -%}
          {%- if doc_list.link -%}
          <a href="{{ doc_list.link | multi_lang }}">
            {%- endif %}
        <div id="{{ doc_list.name | handle }}" class="doc_item">
          <div class="doc_img">
          {%- if doc_list.image -%}
          <img src="{{site.baseurl}}{{ doc_list.image}} " />
          {%- endif -%}
          </div>
          <div class="doc_info">
            <div class="doc_name">
                <span>{{ doc_list.name }}</span>
            </div>
            <div class="doc_description">
                {{ doc_list.description }}
            </div>
          </div>
          <div class="doc_img arrow">
            <img src="{{site.baseurl}}/assets/img/new-icons/right-arrow.svg" />
          </div>
        </div>
          {%- if doc_list.link -%}
          </a>
          {%- endif %}
        {%- endfor -%}
      </div>
      <div id="doc_bottom">
        <div id="doc_bottom_left" class="doc_bottom_full">
          <a href="https://learning.braze.com" target="_blank">

          <div id="doc_lab">
            <div id="doc_lab_img"><img src="{{site.baseurl}}/assets/img/braze_learning.png" /></div>
            <div id="doc_lab_info" class="doc_info">
              <div class="doc_name">
                Braze Learning
              </div>
              <div class="doc_description">
                {{ page.braze_learning }}
              </div>

            </div>

          </div>
          </a>

          <!-- <div id="doc_help" class="doc_info">
            <div class="doc_name">
              Help
            </div>
            <div class="doc_description">
              Can't find what you're looking for? Search below, or visit our <a href="{{site.baseurl}}/help/home/">Help page</a>.
            </div>
            <form id="help-search-form"  action="{{site.baseurl}}/search/" method="get" class="form-inline">
              <div class="input-group ">
                <input type="text" class="form-control" id="help-menu_search"  name="q" placeholder="Search Braze Documentation" aria-label="Search">
                <button class="btn">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </button>
              </div>
          </form>
          </div> -->
        </div>
    </div>

      </div>
    <!-- popular -->
    <div id="doc_right" class="col-xl">
      <div id="doc_popular" class="doc_info">
        <div class="doc_name">{{ site.data.i18n[site.language]['popular_topic'] | default: "Popular Topics"}}</div>
        <div class="doc_description">
        {%- for doc_list in page.popular_topic_list  -%}
          <div>
          <a href="{{ doc_list.link | multi_lang }}">{{ doc_list.name }}</a>
          </div>
        {%- endfor -%}
      </div>
      </div>
      <div id="doc_helpful" class="doc_info">
        <div class="doc_name">{{ site.data.i18n[site.language]['helpful_resources'] | default: "Helpful Resources"}}</div>
        <div class="doc_description">
        {%- for doc_list in page.helpful_resources_list  -%}
          <div>
          <a href="{{ doc_list.link | multi_lang }}">{{ doc_list.name }}</a>
          </div>
        {%- endfor -%}
        </div>
      </div>
      <div id="gradient"></div>
      <a id="status-indicator" href="https://braze.statuspage.io" target="_blank">
        <div id="doc_status" class="doc_info">
            <div class="status-title">{{ site.data.i18n[site.language]['braze_status'] | default: "BRAZE SYSTEM STATUS"}}</div>
            <div class="color-dot"></div><div class="color-description">{{ site.data.i18n[site.language]['braze_status_check'] | default: "Checking Status"}}</div>
        </div>
      </a>

      <script type="text/javascript">
        function loadStatusPage() {
          var lsp = document.createElement('script');
          lsp.type = 'text/javascript';
          lsp.async = true;
          lsp.src = '//statuspage-production.s3.amazonaws.com/se-v2.js';
          lsp.onload = function() {
            if (typeof(StatusPage) !== "undefined") {
              var sp = new StatusPage.page({page: '{{site.status_io_key}}'});
              sp.status({
                success: function (data) {
                  var sd = document.getElementById('status-indicator');
                  sd.getElementsByClassName('color-description')[0].textContent = data.status.description;
                  sd.getElementsByClassName('color-dot')[0].className = "color-dot " + data.status.indicator;
                }
              });
            }
          };

          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(lsp, s);
        };

        window.addEventListener('load', loadStatusPage, false);
      </script>


    </div>
    </div>
    <div class="doc-row">
      {%- unless hide_bottom_nav -%}
      <div id="bottom_nav" >
        {%- unless hide_feedback -%}
        {% include feedback.html  %}
        {%- endunless -%}
        <!-- div class="gradient-line" ></div -->
      </div>
      {%- endunless -%}
      {% include footer.html class="footer_doc" %}
    </div>
</div>
</div>