Use Stories with Glide

Ask for Help
1

HI community,
Is there someone who know how to integrate inappstory.com with glide ?
Is it possible ? It works with but it doesn"t work with ricck text.
It could be very good if a solution exist ?

Thank you for your advices.

2

Bonsoir,

Votre site est-il intégrable ? Si oui sous quel format (iframe/lien URL…) ?

3

Oui je pense que c’est un iframe d’après ce que je vois dans la documentation.

<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and Stories` widget) will be mounted to this <div> tag -->
<div id="stories_widget"></div>

<script>
    // 2. This code loads the web-sdk API code asynchronously 
    // and create queue in global var window.IASReady.

    window.IASReady = (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0], st = window.IASReady || {};
        if (d.getElementById(id)) return st;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://sdk.inappstory.com/js/iframe_api.js";
        js.async = true;
        fjs.parentNode.insertBefore(js, fjs);
        st._e = [];
        st.ready = function (f) {
            st._e.push(f);
        };
        return st;
    }(document, "script", "ias-wjs"));

    // 3. This function creates an <iframe> (and Stories` widget)
    //    after the API code downloads.
    window.IASReady.ready(function () {
        var stories = new window.IAS.Stories("stories_widget", {
            apiKey: "test-key",
            userId: "123",
            tags: "moscow,travels",
            hasLike: true,
            slider: {
                title: {
                    content: 'The best stories',
                    color: '#000',
                    font: 'normal',
                    marginBottom: 20,
                },
                card: {
                    title: {
                        color: 'black',
                        font: '14px/16px InternalPrimaryFont',
                        padding: 8
                    },
                    gap: 10,
                    height: 100,
                    variant: 'quad',
                    border: {
                        radius: 20,
                        color: 'blue',
                        width: 2,
                        gap: 3,
                    },
                    boxShadow: null,
                    opacity: 1,
                    mask: {
                        color: 'rgba(34, 34, 34, 0.3)'
                    },
                    read: {
                        border: {
                            radius: null,
                            color: 'green',
                            width: null,
                            gap: null,
                        },
                        boxShadow: null,
                        opacity: null,
                        mask: {
                            color: 'rgba(34, 34, 34, 0.1)'
                        },
                    },
                },
                layout: {
                    height: 0,
                    backgroundColor: 'transparent'
                },
                sidePadding: 20,
                topPadding: 20,
                bottomPadding: 20,
                bottomMargin: 17,
                navigation: {
                    showControls: false,
                    controlsSize: 48,
                    controlsBackgroundColor: 'white',
                    controlsColor: 'black'
                },
            },
            reader: {
                closeButtonPosition: 'right',
                scrollStyle: 'flat',
            },
            placeholders: {
                user: 'Guest'
            },
            // optional handler
            storyLinkHandleClick: function (payload) {
                // default behaviour
                window.open(payload.url, '_self');
            },
        });

        // 4. Override default loading animation
        stories.on('startLoader', function (widget) {
            widget.style.background = 'url("stories/loader.gif") center / 45px auto no-repeat transparent';
        });
        stories.on('endLoader', function (widget) {
            widget.style.background = 'none';
        });

    });
</script>
</body>
</html>
4

En effet il s’agit d’un script. Malheureusement ces derniers ne sont pas compatibles avec l’infrastructure actuelle. En revanche, ce que je vous propose c’est de publier ce script sur une page web que vous pouvez obtenir gratuitement ou pour des prix très convenables et ensuite afficher votre page en tant que WebView :slight_smile:

5

Merci Aymen pour ton aide :slight_smile: