# Use Stories with Glide

**URL:** <https://community.glideapps.com/t/use-stories-with-glide/29572>\
**Category:** Ask for Help\
**Created:** [July 26, 2021, 6:55pm UTC](https://community.glideapps.com/t/use-stories-with-glide/29572 "2021-07-26T18:55:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aymeric\_de\_Maussion](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymeric_de_maussion/32/29505_2.png) [@Aymeric\_de\_Maussion](https://community.glideapps.com/u/Aymeric_de_Maussion)\
**Post date:** [July 26, 2021, 6:55pm UTC](https://community.glideapps.com/t/use-stories-with-glide/29572/1 "2021-07-26T18:55:34Z")

</div>

HI community,  
Is there someone who know how to integrate [inappstory.com](http://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.

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [July 26, 2021, 7:42pm UTC](https://community.glideapps.com/t/use-stories-with-glide/29572/2 "2021-07-26T19:42:26Z")

</div>

Bonsoir,

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

---

<div class="post-metadata">

**Author:** ![Aymeric\_de\_Maussion](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymeric_de_maussion/32/29505_2.png) [@Aymeric\_de\_Maussion](https://community.glideapps.com/u/Aymeric_de_Maussion)\
**Post date:** [July 26, 2021, 8:01pm UTC](https://community.glideapps.com/t/use-stories-with-glide/29572/3 "2021-07-26T20:01:31Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [July 26, 2021, 8:46pm UTC](https://community.glideapps.com/t/use-stories-with-glide/29572/4 "2021-07-26T20:46:50Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Aymeric\_de\_Maussion](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymeric_de_maussion/32/29505_2.png) [@Aymeric\_de\_Maussion](https://community.glideapps.com/u/Aymeric_de_Maussion)\
**Post date:** [July 27, 2021, 6:39am UTC](https://community.glideapps.com/t/use-stories-with-glide/29572/5 "2021-07-27T06:39:55Z")

</div>

Merci Aymen pour ton aide 🙂
