How to Enable the Advanced Editor for Custom Designs

In addition to the standard layout options provided, you have the ability to create and customize your own templates for Social Media Hubs, enabling a more tailored and unique design.

The Advanced Editor enables a fifth design option called simply “Raw Code“, and when you pick this layout we provide you with example code you can use as the initial starting point for your design.

How to Enable the Advanced Editor for Custom Designs

Step 1: Access your Social Media Hub dashboard. On the left side menu click the Website Embeds to view your embeds. If you created a Social Media Hub, it’ll say Hub Designs instead.

Step 2: Select the hub design you want to convert to the Raw Code layout (or create a new design).

Step 3: Once you’re in a design, click on the More button (represented by three dots) to access additional options. Then, choose Advanced Editor.

Step 4: After enabling the Advanced Editor, the raw code layout will appear. Select the Raw Code layout.

Step 5: There are no design options, except under the Raw Design Options tab. On this tab you will have an option to change the number of posts, but after looking at the code we provide you in the next step, you’ll see that changing that option isn’t actually required here since you can easily change it in your code when building the embed.

Step 6: Click the Get Embed Code button.

Step 6: You can now see the embed code for websites and embed code for Event Apps. Click the button Click to Copy Code to copy the code under the Embed Code for Websites. As you’ll see when looking at the code, there is no iframe or other code we normally have. Instead we provide you with the basics you need to know if you want to call our API’s via REST to get the posts for this wall, as well as the javascript you need if you want to use our real-time capabilities to power your embed.

While we cannot help you build your custom embed, we’d be happy to help you if you have any questions.

Here is an example of the code we provide you when you use the Raw Code layout option:

<!-- BEGIN EVERWALL EMBED: bkvlmdck-oo3dqo7vkg

There are two "raw" ways to access your posts.
1) requesting the JSON or XML feeds directly
2) using our javascript calls

----- JSON or XML feeds (One-off) -----
 * JSON: https://[PERMASLUG].everwall.com/feeds/posts.json
 * XML: https://[PERMASLUG].everwall.com/feeds/posts.xml

Full details here: https://account.everwall.com/apis?id=[PERMASLUG]

----- Javascript (realtime updates) -----
<script src="https://stream.everwall.com/portal.min.js" type="text/javascript"></script>
portal = new Portal();
portal.setPermaslug('[PERMASLUG]');
portal.setListener(['/posts/displayed']);
portal.setPostLimit(50); // This can be set between 1 and 250

function ewPost(event, channel, post, permaslug) {
  console.log(event, channel, post, permaslug);
  if (event == 'post_add') {
    // new post
  } else if (event == 'post_del') {
    // deleted a post
  } else if (event == 'post_del_all') {
    // deleted all posts
  }
}

// ewPost() *must* be loaded before calling this, or you'll get console warnings.
// You also will want to ensure your Dom is loaded before this call so you can insert posts.
portal.connect();

END EVERWALL EMBED -->