Web Content Website Client

The web content client is available in the public Send2CRM Github repository.

The base Send2CRM website client must be configured on the website first.

The web content client is implemented as a custom element that may be added to the website as desired.

Include script

A copy of the client script may be copied to the web server, or it may be used directly from CDN.

<script src="/send2crm-content.min.js"></script>

The script makes the custom content element available to the page.

Custom element

Send2CRM web content appears only when placed in the document, and only displays content for matching location keys. Add <send2crm-content> elements in the desired location(s), with the data-key attribute specified.

<!-- Displays active content for the current user tagged with the "header" location. -->
<send2crm-content data-key="header" />

<!-- "sidebar" location -->
<send2crm-content data-key="sidebar" />

<!-- "footer" location -->
<send2crm-content data-key="footer" />

<!-- Or any custom location desired -->
<send2crm-content data-key="mycustomlocation" />

Add as many web content elements as you wish.

Content will only be delivered within the <send2crm-content> elements. No other modifications are made to the document. Where multiple items qualify for the the same element they will all be shown, in order.

Location keys

The location key is just a simple text value, to match the location of the items specified by the service. Use this to restrict which custom elements display the content.

Areas within the website structure, e.g. header and footer as above.
Output on specific pages only.
Custom conditional output logic.
Any combination of the above.

Send2CRM will retrieve all web content applicable to the current visitor via personalization. However it will only be added to the document where a <send2crm-content> element exists with matching key.

Styling

The custom element does not use a shadow root, delivered content is a part of the base website document and inherits all styles. Content output uses the following structure:

<send2crm-content data-key="(key)">
  <div class="send2crm-content">
    <div id="item-(content_uuid)" class="send2crm-content-item" data-sort="0">
      <div>
        (Sanitized content goes here)
      </div>
    </div>
    <div id="item-(content_uuid)" class="send2crm-content-item" data-sort="1">
      <div>
        (Sanitized content goes here)
      </div>
    </div>
  </div>
</send2crm-content>

The <div class=”send2crm-content-item”> element is repeated for each item of content that applies to the current visitor and location key.