Arrivedo Documentation

Integration tutorial

How to build a SEO friendly page using Arrivedo technology in less than 1 hour of work

To build your content page to be SEO ready and get all the advantages of new technologies like AMP or social metatags, you’ll need to server-side render your content. Luckily Arrivedo’s API provides content that is already structured in SEO friendly HTML, so the only thing to worry is requesting it and printing it in your view.

For this tutorial you will need your Arrivedo Public Key and your Mapbox Access Token for the map.

We will go through these steps:

  1. Request information from Arrivedo’s API in your backend

  2. Print metatags and article body in your view

  3. Render article body using our suggested markup

  4. Include our JS and CSS assets

  5. JS library to format our article’s body and create an interactive map

Request information from Arrivedo’s API

If you are using any dynamic backend technology for your website (like PHP , .NET, Ruby, Python, NodeJS, etc) then you are certainly already familiar with requesting information from REST APIs, below is an example of a simple request in PHP:

<?php

  $arrivedo_public_key = 'YOUR-ARRIVEDO-PUBLIC-KEY';

  $article_slug = 'mangles-de-frontera' // Your article slug here

  $url = 'https://api.arrivedo.com/article/' . $article_slug;

  $context = stream_context_create(
    array(
      'http' => array(
      'method' => 'GET',
      'header' => "Authorization: bearer {$arrivedo_public_key}\r\n".
        "Content-Type: application/json\r\n"
      )
    )
  );

  $response = file_get_contents($url, FALSE, $context);
  if($response === FALSE){
    /* handle error */
  }
  $article = json_decode($response, TRUE);

?>


So now that we have our article data we are ready to print it in a webpage, this is an example of a response from Arrivedo’s API:

{
  "id": "6676e271-45fe-4eec-8a47-e895e078aaca",
  "body": "\u003cp\u003e...",
  "title": "Mangles de Frontera",
  "url_slug": "mangles-de-frontera",
  "tags": ["Tours", "Things to Do"],
  "category": "Things to Do",
  "thumbnail": "https://.../leaG8em3TwWU1vohx6bu7w.jpg",
  "author":
  {
    "name": "Jose Reyes Salazar"
  },
  "contributors": [
  {
    "name": "Jose Reyes Salazar",
  }],
  "meta_description" : "Find information about Mangles de Frontera in Piura...",
  "meta_image" : "https://.../leaG8em3TwWU1vohx6bu7w.jpg",
  "places": [
    {
      "id": "085258fd-b46f-4f63-8d64-4d251a55d3c3",
      "name": "Manglares e Islas de Puerto Pizarro",
      "latlng": [-3.499453, -80.390157],
      "foursquare_id": "",
      "type": "primary",
      "index": 1
    },
    {
      "id": "22c1a8bf-f88a-4afd-b10e-8c9f375d9b36",
      "name": "Zoocriadero de cocodrilos",
      "latlng": [-3.509455, -80.395838],
      "foursquare_id": "",
      "type": "optional",
      "index": 0
    }
  ],
  "created_at": "2019-09-10T23:24:15.591Z",
}


Print metatags and article body in your view

As API response is a JSON object, from which we can read some metadata of the article, so assuming that you deserialize this object, and store its values in an array:

  <meta property="og:title" content="<?= article['title'] ?>">
  <meta property="og:image" content="<?= article['meta_image'] ?>">
  <meta property="og:image" content="<?= article['meta_description'] ?>">


Render article body using our suggested markup

For our article body, we have a suggested markup, if you want to build using our predefined layout and CSS, here you can render the body of the article as plain HTML:

<!-- Suggested markup : starts -->
<div id="arrivedo-container" class="arr-general-container">
  <div class="arr-map-container">
    <div class="arr-map-overlay" id="arr-map-overlay"></div>
    <div id="arrivedo-map-element" class="arr-map-element"></div>
  </div>
  <div class="arr-text-container">
    <div class="arr-text-overlay" id="arr-text-overlay">
      <h1 class="article-title"><?= article['title'] ?></h1>
      <span class="arr-overlay-hint">Keep reading</span>
    </div>
    <div class="arr-article-scroll" id="arr-article-text">
    <h1 class="article-title"><?= article['title'] ?></h1>
    <div class="article-body" id="article-body-element">
      <?= article['body'] ?>
    </div>
    </div>
  </div>
</div>
<!-- Suggested markup : ends -->;

It is also a good idea to put this raw JSON object in a place that our SDK can read from:

<script>
  window.article_data = <?= response ?>;
</script>


Include Arrivedo’s assets

Include our assets in your page to use our predefined styles and our sdk:

<link rel="stylesheet" href="https://res.arrivedo.com/arrivedo.css">
<script src="https://res.arrivedo.com/arrivedo.js"></script>


Use our SDK

This arrivedo.js file exposes a couple of classes that we can use to display the map and format our article:

// ArrivedoClient is already present in the general scope
var mapbox_access_token = "YOUR-MAPBOX-ACCESS-TOKEN";
var client = new ArrivedoClient( {mapbox_access_token : mapbox_access_token} );
var articleBodyElement = document.getElementById('article-body-element');
client.renderArticleBody( window.article_data.body, articleBodyElement );

Finally we can create an interactive map for this article with very few lines of code:

arrivedo.createMap('arrivedo-map-element')
.then(function(map){
  map.displayArticle(window.article_data);
  client.bindMapToScroll( 'arr-article-text', map ); // desktop scrolling
  client.bindMapToScroll( document, map ); //mobile scrolling
});

Last 2 lines, bind the scrolling of the article text to the map.

And that is it!