Integration der Synexit Widgets

<script type="module" src="https://widgets.synexit.com/build/synexit-widgets.esm.js"></script>
<script nomodule src="https://widgets.synexit.com/build/synexit-widgets.js"></script>

GALLERY

<sy-gallery tags="hiking|lake" other-tags="" row-count="3" show-navigation="true"></sy-gallery>

Attribute

tags
other-tags
row-count
show-navigation
lat
lng
radius
image-count
cta-link
cta-text
image-mobile-height
image-desktop-height

Events

window.addEventListener('syGalleryInit', function (e) {
 console.log('total items: ', e.detail);
});
window.addEventListener('syGalleryItemClicked', function (e) {
 console.log('item details: ', e.detail);
});
window.addEventListener('syGalleryError', function (e) {
 console.log('Error: ', e.detail);
});

Styling

sy-gallery{
 --sy-primary-color: #15b0e8;
 --sy-widget-navigation-background: #15b0e8;
 --sy-widget-gallery-cta-background: #15b0e8;
 --sy-widget-gallery-cta-background: #fff; }

NEW COMMUNITY USERS

<sy-new-users community="marken-demo" base="https://club.superfly.fm" with-picture="true" link-target="_blank" ></sy-new-users>

Attribute

community
base
with-picture
rounded-picture
maxitems-per-row
max-items-per-row-desktop
max-image-width
max-items
centered

Events

window.addEventListener('syNewUsersInit', function (e) {
 console.log('total items: ', e.detail);
});
window.addEventListener('syNewUsersError', function (e) {
 console.log('Error: ', e.detail);
});

Styling

sy-new-users{
 --sy-primary-color: #15b0e8;
}

STREAM



<sy-stream base="https://community.gemeinsamerleben.com" community="friendseek|bergsport" show-local-position-filter="true"></sy-stream>

Attribute

additional-link-parameters
base
community
custom-stream-data
hide-show-more
page-size
show-filter
default-filter
show-local-position-filter
local-position-filter-text
lat
lng
radius

Events

window.addEventListener('syStreamInit', function (e) {
 console.log('total items: ', e.detail);
});
window.addEventListener('syStreamFiltered', function (e) {
 console.log('items filtered: ', e.detail);
});
window.addEventListener('syStreamError', function (e) {
 console.log('Error: ', e.detail);
});
window.addEventListener('syStreamNotSupported', function (e) {
 console.log('browser not supportet', e.detail);
});
window.addEventListener('syOnImageClick', function (e) {
 e.detail.event.preventDefault();
 console.log('handle image click', e.detail.images, e.detail.activeIndex);
});

Styling

sy-stream{
 --sy-primary-color: #15b0e8;
 --sy-widget-font-size: 15px;
 --sy-widget-line-height: 1.5;
 --sy-widget-title-font-size: 20px;
 --sy-widget-font-weight: 500;
 --sy-widget-title-line-height: 30px;
 --sy-widget-font-family: 'Open Sans', sans-serif;
 --sy-widget-heading-font-family: 'Raleway',sans-serif;
}

STREAM with custom items

<sy-stream></sy-stream>

Events

document.addEventListener("DOMContentLoaded", function () {
 document.getElementById('customStream').customStreamData = {
  stories: '20547|DA7FE81F:6059',
  events: 'ahXLQdc7EBa|RzLbWhYwaKZ|SJME19Juu2Z|EQLC5xpa9AX',
  groups: 'bXVh9FjEBJV',
  meetups: 'DG9p7PruGJi',
  random: true
 };
});

USER SEARCH

<sy-user-search></sy-user-search>

<sy-user-search base="https://mamis.online" heading="Finde Mamis in deiner Umgebung!" subheading="Hole dir Inspiration, lerne Leute kennen und erlebt Fotografie gemeinsam!" button="Jetzt mitmachen" community="mamis-unter-sich"></sy-user-search>

Attribute

Events

syUserSearchInit
syUserSearchError

Style

#user-widget-2{ --sy-primary-color: #71AEB6; }

USER SEARCH RESULTS

<sy-user-search-results gender="FEMALE" community="golf"></sy-user-search-results>

Attribute

gender
ageMin
ageMax
interest
count

Events

syUserSearchResultsInit
syUserSearchResultsError

USER INTERESTS

<sy-interested-users tag="dogs|cats" community="tierfreunde" max-items="6"></sy-interested-users>

Attribute

community
tag
interest
max-items
row-css

Events

syInterestedUsersInit
syInterestedUsersError

FORUM BUTTON



<sy-forum-button identifier="824" base="https://friendseek.com" css-class="btn" show-participants="true"></sy-forum-button>

Attribute

base
identifier
link-target
css-class
show-participants
show-max-participants

Events

syForumButtonInit
syForumButtonError

Don't wrap users (scrollbar)

.sy-forum-participants{
  flex-wrap: nowrap;
}
Zur Diskussion

FORUM ITEM

<sy-forum-content identifier="824" base="https://friendseek.com"></sy-forum-content>

Attribute

base
identifier
show-last-reply

Events

syForumContentInit
syForumContentError

EVENTS

<sy-events region="" community="marken-demo" ></sy-events>

Attribute

community
region

Events

syEventsInit
syEventsError

BEITRAG

<sy-card type="WALL" item-id="23378"></sy-card>
<sy-card type="WALL" item-id="22647"></sy-card>

AKTIVITÄTSBEITRAG

<sy-card type="WALL" item-id="28869" meetup-id="jnhsZB393Ep"></sy-card>

GRUPPE

<sy-card type="GROUP" item-id="563133EE"></sy-card>

AKTIVITÄT

<sy-card type="MEETUP" item-id="cTEsnRReUsR"></sy-card>

EVENT

<sy-card type="EVENT" item-id="bVA3oZbFANG"></sy-card>