The OpenWeb Developer Hub

Welcome to the OpenWeb developer hub. You'll find comprehensive guides and documentation to help you start working with OpenWeb as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Community Spotlight

Community Spotlight drives users further down engagement funnel and helps you build top-line revenue. Prompt users to act on key initiatives such as registrations, digital subscriptions or conversation call-to-action.


Requirements

  • Monetization campaign created by your OpenWeb PSMPSM - Partner Support Manager
  • Community Spotlight enabled for your account by your OpenWeb PSM
  • Site ID provided by your OpenWeb PSM


Community Spotlight configuration

Your Community Spotlight branding is defined in your Admin Dashboard.

  1. From your Admin Dashboard, click Features > SPOTLIGHT.

  2. Expand the General section to set the general Community Spotlight features:
       • Set the Text color.
       • Set the Brand color.
    Click Save Changes after making any changes.

  3. Expand the Header section to configure the Community Spotlight header:
       • Choose the Header text font size.
       • Choose the Header text font weight.
       • Set the Header Text.
    Click Save Changes after making any changes.

  4. Expand the Card section to set the Community Spotlight card features:
       • Upload a Logo image.
       • Choose a Card Type.
       • Choose the Card text font size.
       • Choose the Card text font weight.
       • Set the Card Text.
    Click Save Changes after making any changes.

  5. Expand the Button section to set configure the Community Spotlight call-to-action button:
       • Choose the Button text font size.
       • Choose the Button text font weight.
       • Set the Button Text.
    Click Save Changes after making any changes.



Implementation

You can embed Community Spotlight on article pages that do not contain a Conversation.

👍

IMPORTANT

After completing these implementation steps, contact your OpenWeb PSM to have your implementation validated.

  1. From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/{SPOT_ID}/...

  1. In the <head> of your AMP page, add the following AMP libraries.
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"/>
<script async="" src="https://cdn.ampproject.org/v0.js">
</script>
<script async="" custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
<script async="" custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<script async="" custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>

  1. Add the following code in the location where Community Spotlight should appear.

    Be sure to replace all 6 instances of SPOT_ID with your Spot ID and replace site_id with the Site ID you received from your OpenWeb PSMPSM - Partner Support Manager.
<div style="padding:8px">
 <amp-list src="https://api-2-0.spot.im/v1.0.0/widget/spot/SPOT_ID/conversation_header/amp" layout="fixed-height" height="92" style="border-radius:6px;box-shadow:0 1px 14px 0 rgba(0, 0, 0, 0.12);height:92px;max-height:92px;margin-bottom:18px">
  <template type="amp-mustache">
   <div style="width:99.5%;height:92px;position:relative;display:flex;align-items:center;justify-content:flex-start;background:#fff;font-weight:300;line-height:19px;font-family:Open Sans">
    <div style="padding:0px 14px">
     <div style="background:rgb(255, 255, 255);width:65px;height:65px;border-radius:50%;box-shadow:0 1px 17px 0 rgba(0, 0, 0, 0.24)">
      <amp-img src="https://images.spot.im/image/upload/q_70,fl_lossy,dpr_3,c_limit/v200/{{logo}}.png" width="60" height="60" style="position:relative;border-radius:50%;top:50%;left:50%;transform:translate(-50%, -50%)">
      </amp-img>
     </div>
    </div>
    <div style="width:100%" id="step1">
     <div style="display:flex">
      <div style="color:rgb(55, 62, 68);width:calc(100% - 24px)">
       <div style="line-height:17px;text-align:left;font-size:16px;margin:0px auto 0px 0px">
        <b>
         A new conversation is coming to {{name}}
        </b>
       </div>
      </div>
      <div role="button" tabindex="0" style="display:flex;align-items:center;align-self:center;position:relative;margin:0 22px" on="tap:step1.hide,step2.show">
       <button style="color:#000;background-color:#fff;height:19px;font-weight:bold;font-size:14px;outline:none;border:none;padding:0">
        Go
       </button>
       <div style="height:0;width:0;margin-top:1px;border-color:#000;border-style:solid;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(-45deg)">
       </div>
      </div>
     </div>
    </div>
    <div id="step2" hidden="" style="width:100%">
     <form id="spotimform" method="post" action-xhr="https://email-connect.spot.im/spotlight-register-mail/SPOT_ID" on="submit-success: step2.hide,step3_submitt_success.show; submit-error: step2.hide,step3_submitt_error.show" style="width:100%">
      <div style="display:flex">
       <div style="position:relative;width:155px">
        <input type="text" name="type" hidden="" value="amp"/>
        <input type="email" name="email" placeholder="Email Address" tabindex="0" required="" style="width:calc(100% - 20px);margin-bottom:27px;border-style:none none solid;background:none;outline:none;transition:all 0.2s ease-out 0s;border-bottom:1px solid rgb(209, 214, 218);border-radius:0;padding:10px 0px 5px 0;max-width:158px;font-size:12px"/>
        <div style="position:absolute;padding:5px 0px;top:0;left:0;font-size:13px;pointer-events:none;transform-origin:left;color:#999;transition:all 0.2s ease-out">
        </div>
       </div>
       <div role="button" tabindex="0" on="tap: spotimform.submit" style="display:flex;align-items:center;margin:0 22px 0 auto">
        <button type="submit" style="color:#000;background-color:#fff;height:19px;font-weight:bold;font-size:14px;outline:none;border:none;padding:0">
         Go
        </button>
        <div style="border-color:#000;border-style:solid;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(-45deg)">
        </div>
       </div>
      </div>
     </form>
    </div>
    <div id="step3_submitt_success" hidden="">
     <div style="display:flex;justify-content:space-between;align-items:center">
      <div style="max-width:210px">
       Keep an eye on your inbox for more details.
      </div>
      <div style="padding:20px">
       <svg width="27px" height="27px" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>
         Group
        </title>
        <g id="Version-1-release" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Artboard-Copy-24" transform="translate(-108.000000, -234.000000)">
          <g id="Group" transform="translate(108.000000, 234.000000)">
           <circle id="Oval" fill="#35B840" cx="13.5" cy="13.5" r="13.5">
           </circle>
           <path d="M11.2865789,16.2291896 L9.131537,13.5317769 C8.71786369,13.0139922 7.96276781,12.9295933 7.44498315,13.3432666 C6.92719849,13.7569399 6.84279957,14.5120358 7.25647288,15.0298204 L10.2227673,18.7426579 C10.6599589,19.2898798 11.4709445,19.3479211 11.9816091,18.8685363 L20.1909299,11.1620627 C20.6741239,10.7084659 20.6981171,9.94904681 20.2445203,9.46585279 C19.7909235,8.98265876 19.0315044,8.95866551 18.5483104,9.41226236 L11.2865789,16.2291896 Z" id="Path-6" fill="#FFFFFF" fill-rule="nonzero" transform="translate(13.781792, 14.140409) rotate(-3.000000) translate(-13.781792, -14.140409) ">
           </path>
          </g>
         </g>
        </g>
       </svg>
      </div>
     </div>
     <div id="step3_submitt_error" hidden="">
      Something went wrong
     </div>
    </div>
   </div>
  </template>
 </amp-list>
 <a data-spmark="ad-choice" href="https://dynamic-cdn.spot.im/yad/optout.html" target="_blank">
  <amp-img src="https://publisher-assets.spot.im/yad/ad-choises.png" width="9px" height="9px">
  </amp-img>
 </a>
 <amp-list width="auto" height="1" layout="fixed-height" items="items" style="text-align:center" src="https://spotops.spot.im/spot/SPOT_ID/conversation_header/amp">
  <template type="amp-mustache">
   {{^isVideo}}
   <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-slot="{{code}}" json='{"targeting":{"ampRCSpotId":["SPOT_ID"]}}' rtc-config='{"vendors":{"IndexExchange":{"SITE_ID":site_id}},"timeoutMillis":1000}'>
   </amp-ad>
   {{/isVideo}}{{#isVideo}}
   <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-playonview="1" data-pauseonunseen="1" data-publisherid="5e0e296628a061270b21ccab" data-channelid="{{code}}" data-ref1="AV_CUSTOM1={{seller_id}}&AV_CUSTOM2=SPOT_ID" data-passbackurl="https://play.aniview.com/57b31584f83f1518108b4568/5e71193539e7c102b4435af3/spotimpassback.js">
   </amp-ad>
   {{/isVideo}}
  </template>
 </amp-list>
 <amp-iframe width="375" height="815" sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation" layout="responsive" frameborder="0" src="https://amp.spot.im/production.html?redirect=true&spot_im_highlight_immediate=true&spotId=SPOT_ID&postId=-1">
  <amp-img placeholder="true" height="815" layout="fill" src="//amp.spot.im/loader.png">
  </amp-img>
  <div overflow="" class="spot-im-amp-overflow" tabindex="0" role="button" aria-label="Read more">
   Load more...
  </div>
 </amp-iframe>
</div>

Updated 2 months ago


Community Spotlight


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.