Adding testimonials to your React Native app is easy to do and requires only two external dependencies. Here’s how to do it in just a few steps:

1. Click on Studio

Click on Studio

2. Select a widget style under Widgets

Pick the testimonial widget style you want to create. You can always change it later.

Select a widget style under Widgets

3. Name your widget

Here we've called it Best testimonials

Name your widget

4. Select where you want to embed the widget

This will help you find it later

Select where you want to embed the widget

5. Click on Create widget

Let's start creating the widget

Click on Create widget

6. Decide what testimonials you want to add

You can set rules so that any new approved testimonials are automatically added to the widget, or curate. Here, we selected curate as we will manually select the testimonials to add to the widget.

Decide what testimonials you want to add

7. Click on Continue

Click on Continue

8. Start selecting your testimonials

Here's the first one. Select as many as you want to display.

Start selecting your testimonials

9. Click on Save Selection

Once you're happy with the selection, click on Save Selection

Click on Save Selection

10. Click on Design

Here's your widget. Let's update its design - simplyu c

Click on Design

ℹ️ There are lots of design settings and they vary by widget. Make your design changes here until you are happy with the widget.


11. Click on Share

I'm happy with the design changes, so now it's time to share the widget. Click on Share.

Click on Share

12. Click on the copy icon

This will copy the widget code for use on any landing page tool

Click on the copy icon

13. Click on Done

The code is copied and you're read to navigate to your landing page tool

Click on Done

Want a faster way to copy your widget code? Use Senja’s Chrome Extension ✨

Senja’s free Chrome Extension allows you to copy your widget code and form URLs, and see all your latest testimonials, all without leaving the page you’re on. Download it free here

Add the embed code to your React Native

Install react-native-autoheight-webview and react-native-webview.

Yarn/NPM:

yarn add react-native-autoheight-webview@^1.6.5 react-native-webview@^13.6.4

Expo:

expo install react-native-webview
yarn add react-native-autoheight-webview@^1.6.5

Note: Make sure to use react-native-autoheight-webview version 1.6.5

Paste this Senja component:

import { StyleSheet, View } from 'react-native';
import AutoHeightWebView from "react-native-autoheight-webview";
import { useState } from "react";
import { Dimensions } from "react-native";

export const SenjaEmbed = (props: { id: string }) => {
  const [webViewHeight, setWebViewHeight] = useState(
    Dimensions.get("window").height
  );

  return (
    <AutoHeightWebView
      style={{
        maxHeight: webViewHeight,
        width: "100%",
      }}
      onSizeUpdated={(size) => {
        setWebViewHeight(size.height);
      }}
      showsVerticalScrollIndicator={false}
      scrollEnabled={false}
      source={{
        html: `
            <!DOCTYPE html>
            <html>
              <head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
              </head>
              <body>
                 <div class="senja-embed" data-id="${props.id}" data-mode="shadow" data-lazyload="false">
                 </div>
                 <script async type="text/javascript" src="https://widget.senja.io/widget/${props.id}/platform.js"></script>
              </body>
            </html>
          `,
      }}
    />
  );
};

// Use the widget like this

export default function App() {
  return (
    <View style={styles.container}>
      <SenjaEmbed id="YOUR-WIDGET-ID" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Make sure to replace id with your Senja widget id.

Note: You may need to refresh your react native app before it’ll show up.

Once you do this, your Senja widget will be rendered on the page, like this:

That’s it, your testimonial widget is now embedded in your React native app! Not working? Just click Contact Us below and we’ll assist you.

How to add your testimonials to other platforms

Other landing page platforms

Course platforms

Creator marketplace platforms

Calendar tools

Sales tools and emails

To your code

Ecommerce platforms

Emails

Did this answer your question?